fix: Update frontend-build (#340 )

Update frontend-platform
fix(deps): update font awesome
2020-11-10 17:18:02 -05:00 · 2020-11-10 02:00:05 +00:00 · 2020-11-10 00:58:25 +00:00 · 2020-11-09 23:36:50 +00:00 · 2020-11-08 16:03:56 -05:00 · 2020-11-05 14:40:40 -05:00
21 changed files with 9632 additions and 5615 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -31,17 +31,16 @@
  "dependencies": {
    "@edx/frontend-component-footer": "10.0.11",
    "@edx/frontend-component-header": "2.0.5",
-    "@edx/frontend-platform": "1.1.14",
+    "@edx/frontend-platform": "1.6.1",
    "@edx/paragon": "9.1.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.30",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
    "@fortawesome/free-brands-svg-icons": "5.8.2",
    "@fortawesome/free-regular-svg-icons": "5.7.2",
    "@fortawesome/free-solid-svg-icons": "5.8.2",
-    "@fortawesome/react-fontawesome": "0.1.11",
-    "@tensorflow-models/coco-ssd": "1.0.0",
-    "@tensorflow/tfjs": "1.6.0",
-    "@tensorflow/tfjs-converter": "1.6.0",
-    "@tensorflow/tfjs-core": "1.6.0",
+    "@fortawesome/react-fontawesome": "0.1.12",
+    "@tensorflow-models/blazeface": "git+https://github.com/alangsto/blazeface.git",
+    "@tensorflow/tfjs-converter": "1.6.1",
+    "@tensorflow/tfjs-core": "1.6.1",
    "babel-polyfill": "6.26.0",
    "bowser": "^2.10.0",
    "classnames": "2.2.6",
@@ -78,15 +77,15 @@
    "redux-saga": "1.1.3",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
-    "universal-cookie": "4.0.3"
+    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@edx/frontend-build": "2.0.6",
+    "@edx/frontend-build": "5.3.2",
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^10.4.7",
    "codecov": "3.7.2",
    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.4",
+    "enzyme-adapter-react-16": "1.15.5",
    "es-check": "5.0.0",
    "husky": "3.0.9",
    "jest": "^26.1.0",
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
      <title>Account | edX</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <div id="root"></div>
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -106,6 +106,7 @@ function EditableField(props) {
            >
              <label className="h6 d-block" htmlFor={id}>{label}</label>
              <Input
+                data-hj-suppress
                name={name}
                id={id}
                type={type}
@@ -155,7 +156,7 @@ function EditableField(props) {
                </Button>
              ) : null}
            </div>
-            <p>{renderValue(value)}</p>
+            <p data-hj-suppress>{renderValue(value)}</p>
            <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
          </div>
        ),
--- a/src/account-settings/EmailField.jsx
+++ b/src/account-settings/EmailField.jsx
@@ -109,6 +109,7 @@ function EmailField(props) {
            >
              <label className="h6 d-block" htmlFor={id}>{label}</label>
              <Input
+                data-hj-suppress
                name={name}
                id={id}
                type="email"
@@ -156,7 +157,7 @@ function EmailField(props) {
                </Button>
              ) : null}
            </div>
-            <p>{renderValue()}</p>
+            <p data-hj-suppress>{renderValue()}</p>
            {renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
          </div>
        ),
--- a/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
+++ b/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
@@ -74,7 +74,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -136,7 +138,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            <button
              className="btn btn-link p-0"
              onBlur={[Function]}
@@ -206,7 +210,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -268,7 +274,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -330,7 +338,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -392,7 +402,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -454,7 +466,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -516,7 +530,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -578,7 +594,9 @@ exports[`DemographicsSection should render 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -679,7 +697,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -741,7 +761,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            <button
              className="btn btn-link p-0"
              onBlur={[Function]}
@@ -811,7 +833,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -873,7 +897,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -935,7 +961,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -997,7 +1025,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1059,7 +1089,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1121,7 +1153,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1183,7 +1217,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1305,7 +1341,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1367,7 +1405,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Hispanic, Latin, or Spanish origin, White
          </p>
          <p
@@ -1429,7 +1469,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1491,7 +1533,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1553,7 +1597,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1615,7 +1661,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1677,7 +1725,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1739,7 +1789,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1801,7 +1853,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1888,7 +1942,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -1950,7 +2006,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Asian
          </p>
          <p
@@ -2012,7 +2070,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2074,7 +2134,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2136,7 +2198,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2198,7 +2262,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2260,7 +2326,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2322,7 +2390,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2384,7 +2454,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2471,7 +2543,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2533,7 +2607,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            <button
              className="btn btn-link p-0"
              onBlur={[Function]}
@@ -2603,7 +2679,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2665,7 +2743,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2727,7 +2807,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2789,7 +2871,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2851,7 +2935,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Other: test
          </p>
          <p
@@ -2913,7 +2999,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -2975,7 +3063,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3062,7 +3152,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer to self describe: test
          </p>
          <p
@@ -3124,7 +3216,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            <button
              className="btn btn-link p-0"
              onBlur={[Function]}
@@ -3194,7 +3288,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3256,7 +3352,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3318,7 +3416,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3380,7 +3480,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3442,7 +3544,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3504,7 +3608,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
@@ -3566,7 +3672,9 @@ exports[`DemographicsSection should set user input correctly when user provides
              Edit
            </button>
          </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
            Prefer not to respond
          </p>
          <p
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -182,6 +182,21 @@
  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
  "id.verification.photo.take": "Take Photo",
  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
  "id.verification.camera.access.title": "Camera Permissions",
  "id.verification.camera.access.title.success": "Camera Access Enabled",
  "id.verification.camera.access.title.failed": "Camera Access Failed",
@@ -243,7 +258,8 @@
  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
-  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
  "id.verification.account.name.title": "Account Name Check",
  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
@@ -264,11 +280,13 @@
  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
  "id.verification.review.id.retake": "Retake ID Photo",
  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
  "id.verification.submitted.title": "Identity Verification in Progress",
  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
  "id.verification.return.dashboard": "Return to Your Dashboard",
  "id.verification.return.course": "Return to Course",
  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
  "id.verification.account.name.edit": "Edit{sr}"
 }
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -11,7 +11,7 @@
  "account.settings.section.account.information": "Información de la cuenta",
  "account.settings.section.account.information.description": "Estas configuraciones incluyen información básica sobre tu cuenta.",
  "account.settings.section.profile.information": "Información del perfil",
-  "account.settings.section.demographics.information": "Optional Information",
+  "account.settings.section.demographics.information": "Información opcional",
  "account.settings.section.site.preferences": "Preferencias del sitio",
  "account.settings.section.linked.accounts": "Cuentas vinculadas",
  "account.settings.section.linked.accounts.description": "Puedes vincular tus cuentas de redes sociales para simplificar el proceso de iniciar sesión en edX.",
@@ -117,43 +117,43 @@
  "account.settings.delete.account.modal.confirm.cancel": "Cancelar",
  "account.settings.delete.account.error.unable.to.delete": "No es posible eliminar esta cuenta",
  "account.settings.delete.account.error.no.password": "Se requiere una contraseña",
-  "account.settings.delete.account.error.invalid.password": "Password is incorrect",
+  "account.settings.delete.account.error.invalid.password": "Contraseña incorrecta",
  "account.settings.delete.account.error.unable.to.delete.details": "Ocurrió un error al procesar tu solicitud. Por favor, intente nuevamente más tarde.",
  "account.settings.delete.account.modal.after.header": "¡Sentimos que te vayas! Tu cuenta será eliminada en breve.",
  "account.settings.delete.account.modal.after.text": "La eliminación de cuenta, incluyendo la eliminación de las listas de correo electrónico, puede tardar unas semanas en procesarse totalmente en nuestro sistema. Si quieres renunciar a recibir correos antes de que la eliminación se haya completado, por favor date de baja mediante el enlace que aparece al final de los correos.",
  "account.settings.delete.account.modal.after.button": "Cerrar",
  "account.settings.delete.account.text.3": "Puede que también pierdas el acceso a los certificados verificados y otros certificados de programas como los de los MicroMasters. Si quieres hacer una copia de dichos certificados para tus archivos antes de proceder a la eliminación, {actionLink}.",
-  "account.settings.message.demographics.service.issue": "An error occurred attempting to retrieve or save your account information. Please try again later.",
-  "account.settings.field.demographics.gender": "Gender identity",
-  "account.settings.field.demographics.gender.empty": "Add gender identity",
-  "account.settings.field.demographics.gender.options.empty": "Select a gender identity",
-  "account.settings.field.demographics.gender_description": "Gender identity description",
-  "account.settings.field.demographics.gender_description.empty": "Enter description",
-  "account.settings.field.demographics.ethnicity": "Race/Ethnicity identity",
-  "account.settings.field.demographics.ethnicity.empty": "Add race/ethnicity identity",
-  "account.settings.field.demographics.ethnicity.options.empty": "Select all that apply",
-  "account.settings.field.demographics.income": "Family income",
-  "account.settings.field.demographics.income.empty": "Add family income",
-  "account.settings.field.demographics.income.options.empty": "Select a family income range",
-  "account.settings.field.demographics.military_history": "U.S. Military status",
+  "account.settings.message.demographics.service.issue": "Ocurrió un error al intentar recuperar o guardar la información de tu cuenta. Por favor inténtalo más tarde.",
+  "account.settings.field.demographics.gender": "Identidad de género",
+  "account.settings.field.demographics.gender.empty": "Añade identidad de género",
+  "account.settings.field.demographics.gender.options.empty": "Selecciona una identidad de género",
+  "account.settings.field.demographics.gender_description": "Descripción de identidad de género",
+  "account.settings.field.demographics.gender_description.empty": "Ingresa descripción",
+  "account.settings.field.demographics.ethnicity": "Identidad étnica/raza",
+  "account.settings.field.demographics.ethnicity.empty": "Añade identidad étnica/raza",
+  "account.settings.field.demographics.ethnicity.options.empty": "Selecciona todas las que apliquen",
+  "account.settings.field.demographics.income": "Ingreso familiar",
+  "account.settings.field.demographics.income.empty": "Añade ingreso familiar",
+  "account.settings.field.demographics.income.options.empty": "Selecciona un rango de ingreso familiar",
+  "account.settings.field.demographics.military_history": "Estatus militar en EE.UU.",
  "account.settings.field.demographics.military_history.empty": "Add military status",
-  "account.settings.field.demographics.military_history.options.empty": "Select military status",
-  "account.settings.field.demographics.learner_education_level": "Your education level",
-  "account.settings.field.demographics.learner_education_level.empty": "Add education level",
-  "account.settings.field.demographics.parent_education_level": "Parents/Guardians education level",
-  "account.settings.field.demographics.parent_education_level.empty": "Add education level",
-  "account.settings.field.demographics.education_level.options.empty": "Select education level",
-  "account.settings.field.demographics.work_status": "Employment status",
-  "account.settings.field.demographics.work_status.empty": "Add employment status",
-  "account.settings.field.demographics.work_status.options.empty": "Select employment status",
-  "account.settings.field.demographics.work_status_description": "Employment status description",
-  "account.settings.field.demographics.work_status_description.empty": "Enter description",
-  "account.settings.field.demographics.current_work_sector": "Current work industry",
-  "account.settings.field.demographics.current_work_sector.empty": "Add work industry",
-  "account.settings.field.demographics.future_work_sector": "Future work industry",
-  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
-  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
-  "account.settings.section.demographics.why": "Why does edX collect this information?",
+  "account.settings.field.demographics.military_history.options.empty": "Selecciona estatus militar",
+  "account.settings.field.demographics.learner_education_level": "Tu nivel educacional",
+  "account.settings.field.demographics.learner_education_level.empty": "Añade nivel educacional",
+  "account.settings.field.demographics.parent_education_level": "Nivel educacional de padres/tutores",
+  "account.settings.field.demographics.parent_education_level.empty": "Añade nivel educacional",
+  "account.settings.field.demographics.education_level.options.empty": "Selecciona nivel educacional",
+  "account.settings.field.demographics.work_status": "Estatus laboral",
+  "account.settings.field.demographics.work_status.empty": "Añade estatus laboral",
+  "account.settings.field.demographics.work_status.options.empty": "Selecciona estatus laboral",
+  "account.settings.field.demographics.work_status_description": "Descripción estatus laboral",
+  "account.settings.field.demographics.work_status_description.empty": "Ingresa descripción",
+  "account.settings.field.demographics.current_work_sector": "Área profesional actual",
+  "account.settings.field.demographics.current_work_sector.empty": "Añade área profesional",
+  "account.settings.field.demographics.future_work_sector": "Área profesional futura",
+  "account.settings.field.demographics.future_work_sector.empty": "Añade área profesional",
+  "account.settings.field.demographics.work_sector.options.empty": "Selecciona área profesional",
+  "account.settings.section.demographics.why": "¿Por qué edX obtiene esta información?",
  "error.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
  "account.settings.editable.field.password.reset.button.confirmation.support.link": "soporte técnico",
  "account.settings.editable.field.password.reset.button.confirmation": "Hemos mandado un mensaje a {email}. Haz clic en el enlace en el mensaje para restablecer tu contraseña. ¿No recibiste el mensaje? Contáctate con {technicalSupportLink}.",
@@ -166,30 +166,45 @@
  "account.settings.sso.unlink.account": "Desvincular la cuenta de {accountName} ",
  "account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento.",
  "id.verification.existing.request.denied.text": "You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
-  "id.verification.next": "Next",
-  "id.verification.requirements.title": "Photo Verification Requirements",
-  "id.verification.requirements.description": "In order to complete Photo Verification online, you will need the following:",
-  "id.verification.requirements.card.device.title": "Device with Camera",
-  "id.verification.requirements.card.device.allow": "Allow",
-  "id.verification.requirements.card.id.title": "Photo Identification",
-  "id.verification.requirements.card.id.text": "You need a valid ID that contains your full name and photo.",
+  "id.verification.next": "Siguiente",
+  "id.verification.requirements.title": "Requerimientos de verificación por foto",
+  "id.verification.requirements.description": "Para completar la verificación por foto en línea, necesitarás lo siguiente:",
+  "id.verification.requirements.card.device.title": "Dispositivo con cámara",
+  "id.verification.requirements.card.device.allow": "Permitir",
+  "id.verification.requirements.card.id.title": "Identificación por foto",
+  "id.verification.requirements.card.id.text": "Necesitas un ID válido que contenga tu nombre completo y tu foto.",
  "id.verification.privacy.title": "Privacy Information",
-  "id.verification.privacy.need.photo.question": "Why does edX need my photo?",
-  "id.verification.privacy.need.photo.answer": "We use your verification photos to confirm your identity and ensure the validity of your certificate.",
-  "id.verification.privacy.do.with.photo.question": "What does edX do with this photo?",
+  "id.verification.privacy.need.photo.question": "¿Por qué edX necesita mi foto?",
+  "id.verification.privacy.need.photo.answer": "Utilizamos tus fotos de verificación para confirmar tu identidad y garantizar la validez de tu certificado.",
+  "id.verification.privacy.do.with.photo.question": "¿Qué hace edX con esta foto?",
  "id.verification.privacy.do.with.photo.answer": "We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.",
-  "id.verification.existing.request.title": "Identity Verification",
+  "id.verification.existing.request.title": "Verificación de identidad",
  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
-  "id.verification.photo.take": "Take Photo",
-  "id.verification.photo.retake": "Retake Photo",
-  "id.verification.camera.access.title": "Camera Permissions",
+  "id.verification.photo.take": "Tomar la foto",
+  "id.verification.photo.retake": "Tomar nuevamente la foto",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
+  "id.verification.camera.access.title": "Permisos de la cámara",
  "id.verification.camera.access.title.success": "Camera Access Enabled",
  "id.verification.camera.access.title.failed": "Camera Access Failed",
-  "id.verification.camera.access.click.allow": "Please make sure to click \"Allow\"",
-  "id.verification.camera.access.enable": "Enable Camera",
-  "id.verification.camera.access.problems": "Having problems?",
-  "id.verification.camera.access.skip": "Skip and upload image files instead",
-  "id.verification.camera.access.success": "Looks like your camera is working and ready.",
+  "id.verification.camera.access.click.allow": "Por favor asegúrate de hacer clic en \"Permitir\"",
+  "id.verification.camera.access.enable": "Habilitar cámara",
+  "id.verification.camera.access.problems": "¿Tienes problemas?",
+  "id.verification.camera.access.skip": "Omitir y cargar un archivo de imagen",
+  "id.verification.camera.access.success": "Parece que tu cámara está funcionando y está lista.",
  "id.verification.camera.access.failure": "It looks like we're unable to access your camera. You will need to upload image files of you and your photo id.",
  "id.verification.camera.access.failure.temporary": "It looks like we're unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.",
  "id.verification.camera.access.failure.temporary.chrome": "To enable camera access in Chrome:",
@@ -217,7 +232,7 @@
  "id.verification.camera.access.failure.temporary.safari.step2": "Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.",
  "id.verification.camera.access.failure.temporary.safari.step3": "Select the \"Websites\" tab and then select \"Camera.\"",
  "id.verification.camera.access.failure.temporary.safari.step4": "Select \"edx.org\" and change the camera permissions to \"Allow.\"",
-  "id.verification.photo.tips.title": "Helpful Photo Tips",
+  "id.verification.photo.tips.title": "Consejos útiles de fotos",
  "id.verification.photo.tips.description": "Next, we'll need you to take a photo of your face. Please review the helpful tips below.",
  "id.verification.photo.tips.list.title": "Photo Tips",
  "id.verification.photo.tips.list.description": "To take a successful photo, make sure that:",
@@ -243,7 +258,8 @@
  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
-  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
  "id.verification.account.name.title": "Account Name Check",
  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
@@ -264,11 +280,13 @@
  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
  "id.verification.review.id.retake": "Retake ID Photo",
  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
  "id.verification.submitted.title": "Identity Verification in Progress",
  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
  "id.verification.return.dashboard": "Return to Your Dashboard",
  "id.verification.return.course": "Return to Course",
  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
  "id.verification.account.name.edit": "Edit{sr}"
 }
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -182,6 +182,21 @@
  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
  "id.verification.photo.take": "Take Photo",
  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
  "id.verification.camera.access.title": "Camera Permissions",
  "id.verification.camera.access.title.success": "Camera Access Enabled",
  "id.verification.camera.access.title.failed": "Camera Access Failed",
@@ -243,7 +258,8 @@
  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
-  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
  "id.verification.account.name.title": "Account Name Check",
  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
@@ -264,11 +280,13 @@
  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
  "id.verification.review.id.retake": "Retake ID Photo",
  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
  "id.verification.submitted.title": "Identity Verification in Progress",
  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
  "id.verification.return.dashboard": "Return to Your Dashboard",
  "id.verification.return.course": "Return to Course",
  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
  "id.verification.account.name.edit": "Edit{sr}"
 }
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -182,6 +182,21 @@
  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
  "id.verification.photo.take": "Take Photo",
  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
  "id.verification.camera.access.title": "Camera Permissions",
  "id.verification.camera.access.title.success": "Camera Access Enabled",
  "id.verification.camera.access.title.failed": "Camera Access Failed",
@@ -243,7 +258,8 @@
  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
-  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
  "id.verification.account.name.title": "Account Name Check",
  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
@@ -264,11 +280,13 @@
  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
  "id.verification.review.id.retake": "Retake ID Photo",
  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
  "id.verification.submitted.title": "Identity Verification in Progress",
  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
  "id.verification.return.dashboard": "Return to Your Dashboard",
  "id.verification.return.course": "Return to Course",
  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
  "id.verification.account.name.edit": "Edit{sr}"
 }
--- a/src/id-verification/Camera.jsx
+++ b/src/id-verification/Camera.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as cocoSsd from '@tensorflow-models/coco-ssd';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import * as blazeface from '@tensorflow-models/blazeface';
 import CameraPhoto, { FACING_MODES } from 'jslib-html5-camera-photo';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Form, Spinner } from '@edx/paragon';
@@ -17,22 +18,42 @@ class Camera extends React.Component {
    this.setDetection = this.setDetection.bind(this);
    this.state = {
      dataUri: '',
-      outlineColor: '#ff3300',
      videoHasLoaded: false,
      shouldDetect: false,
      isFinishedLoadingDetection: true,
+      shouldGiveFeedback: true,
+      feedback: '',
    };
  }

  componentDidMount() {
    this.cameraPhoto = new CameraPhoto(this.videoRef.current);
-    this.cameraPhoto.startCamera(FACING_MODES.USER, { width: 1280 });
+    this.cameraPhoto.startCamera(
+      this.props.isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,
+      { width: 640, height: 480 },
+    );
  }

  async componentWillUnmount() {
    this.cameraPhoto.stopCamera();
  }

+  sendEvent() {
+    let eventName = 'edx.id_verification';
+    if (this.props.isPortrait) {
+      eventName += '.user_photo';
+    } else {
+      eventName += '.id_photo';
+    }
+
+    if (this.state.shouldDetect) {
+      eventName += '.face_detection_enabled';
+    } else {
+      eventName += '.face_detection_disabled';
+    }
+    sendTrackEvent(eventName);
+  }
+
  setDetection() {
    this.setState(
      { shouldDetect: !this.state.shouldDetect },
@@ -41,6 +62,7 @@ class Camera extends React.Component {
          this.setState({ isFinishedLoadingDetection: false });
          this.startDetection();
        }
+        this.sendEvent();
      },
    );
  }
@@ -48,7 +70,7 @@ class Camera extends React.Component {
  startDetection() {
    setTimeout(() => {
      if (this.state.videoHasLoaded) {
-        const loadModelPromise = cocoSsd.load();
+        const loadModelPromise = blazeface.load();
        Promise.all([loadModelPromise])
          .then((values) => {
            this.setState({ isFinishedLoadingDetection: true });
@@ -63,7 +85,7 @@ class Camera extends React.Component {
  }

  detectFromVideoFrame = (model, video) => {
-    model.detect(video).then((predictions) => {
+    model.estimateFaces(video).then((predictions) => {
      if (this.state.shouldDetect && !this.state.dataUri) {
        this.showDetections(predictions);

@@ -82,42 +104,117 @@ class Camera extends React.Component {
    }
    // predictions is an array of objects describing each detected face
    predictions.forEach((prediction) => {
-      if (prediction.class === 'person') {
-        const xAdjustment = 70;
-        const yAdjustment = 55;
-        const x = prediction.bbox[0] - xAdjustment;
-        const y = prediction.bbox[1] - yAdjustment;
-        const width = prediction.bbox[2];
+      const start = [prediction.topLeft[0], prediction.topLeft[1]];
+      const end = [prediction.bottomRight[0], prediction.bottomRight[1]];
+      const size = [end[0] - start[0], end[1] - start[1]];

-        let isInPosition;
+      // landmarks is an array of points representing each facial landmark (i.e. right eye, left eye, nose, etc.)
+      const features = prediction.landmarks;
+      let isInPosition = true;

+      // for each of the landmarks, determine if it is in position
+      for (let j = 0; j < features.length; j++) {
+        const x = features[j][0];
+        const y = features[j][1];
+
+        let isInRange;
        if (this.props.isPortrait) {
-          isInPosition = this.isInRangeForPortrait(x, y, width);
+          isInRange = this.isInRangeForPortrait(x, y);
        } else {
-          isInPosition = this.isInRangeForID(x, y, width);
+          isInRange = this.isInRangeForID(x, y);
        }
+        // if it is not in range, give feedback depending on which feature is out of range
+        isInPosition = isInPosition && isInRange;
+      }

-        // set the color depending on if all landmarks are in position
-        if (isInPosition) {
-          this.setState({ outlineColor: '#00ffff' });
-        } else {
-          this.setState({ outlineColor: '#ff3300' });
-        }
-
-        // Draw the bounding box.
-        canvasContext.strokeStyle = this.state.outlineColor;
-        canvasContext.lineWidth = 15;
-        canvasContext.strokeRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
+      // draw a box depending on if all landmarks are in position
+      if (isInPosition) {
+        canvasContext.strokeStyle = '#00ffff';
+        canvasContext.lineWidth = 6;
+        canvasContext.strokeRect(start[0], start[1], size[0], size[1]);
+        // give positive feedback here if user is in correct position
+        this.giveFeedback(predictions.length, [], true);
+      } else {
+        canvasContext.fillStyle = 'rgba(255, 51, 0, 0.75)';
+        canvasContext.fillRect(start[0], start[1], size[0], size[1]);
+        this.giveFeedback(predictions.length, features[0], false);
      }
    });
+
+    if (predictions.length === 0) {
+      this.giveFeedback(predictions.length, [], false);
+    }
  }

-  isInRangeForPortrait(x, y, width) {
-    return x > -80 && x < 70 && y > -20 && y < 80 && width > 300 && width < 650;
+  giveFeedback(numFaces, rightEye, isCorrect) {
+    if (this.state.shouldGiveFeedback) {
+      const currentFeedback = this.state.feedback;
+      let newFeedback = '';
+      if (numFaces === 1) {
+        // only give feedback if one face is detected otherwise
+        // it would be difficult to tell a user which face to move
+        if (isCorrect) {
+          newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.correct']);
+        } else {
+          // give feedback based on where user is
+          newFeedback = this.props.intl.formatMessage(messages[this.getGridPosition(rightEye)]);
+        }
+      } else if (numFaces > 1) {
+        newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.two.faces']);
+      } else {
+        newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.no.faces']);
+      }
+      if (currentFeedback !== newFeedback) {
+        // only update status if it is different, so we don't overload the user with status updates
+        this.setState({ feedback: newFeedback });
+      }
+      // turn off feedback for one to ensure that instructions aren't disruptive/interrupting
+      this.setState({ shouldGiveFeedback: false });
+      setTimeout(() => {
+        this.setState({ shouldGiveFeedback: true });
+      }, 1000);
+    }
  }

-  isInRangeForID(x, y, width) {
-    return x > -60 && x < 10 && y > 0 && y < 150 && width > 230 && width < 540;
+  getGridPosition(coordinates) {
+    // Used to determine where a face is (i.e. top-left, center-right, bottom-center, etc.)
+
+    const x = coordinates[0];
+    const y = coordinates[1];
+
+    let messageBase = 'id.verification.photo.feedback';
+
+    const heightUpperLimit = 320;
+    const heightMiddleLimit = 160;
+
+    if (y < heightMiddleLimit) {
+      messageBase += '.top';
+    } else if (y < heightUpperLimit && y >= heightMiddleLimit) {
+      messageBase += '.center';
+    } else {
+      messageBase += '.bottom';
+    }
+
+    const widthRightLimit = 213;
+    const widthMiddleLimit = 427;
+
+    if (x < widthRightLimit) {
+      messageBase += '.right';
+    } else if (x >= widthRightLimit && x < widthMiddleLimit) {
+      messageBase += '.center';
+    } else {
+      messageBase += '.left';
+    }
+
+    return messageBase;
+  }
+
+  isInRangeForPortrait(x, y) {
+    return x > 47 && x < 570 && y > 100 && y < 410;
+  }
+
+  isInRangeForID(x, y) {
+    return x > 120 && x < 470 && y > 120 && y < 350;
  }

  setVideoHasLoaded() {
@@ -128,8 +225,9 @@ class Camera extends React.Component {
    if (this.state.dataUri) {
      return this.reset();
    }
+
    const config = {
-      sizeFactor: 1,
+      sizeFactor: this.getSizeFactor(),
    };

    this.playShutterClick();
@@ -138,6 +236,30 @@ class Camera extends React.Component {
    this.props.onImageCapture(dataUri);
  }

+  getSizeFactor() {
+    let sizeFactor = 1;
+    const settings = this.cameraPhoto.getCameraSettings();
+    if (settings) {
+      const videoWidth = settings.width;
+      const videoHeight = settings.height;
+      // need to multiply by 3 because each pixel contains 3 bytes
+      const currentSize = videoWidth * videoHeight * 3;
+      // chose a limit of 9,999,999 (bytes) so that result will
+      // always be less than 10MB
+      const ratio = 9999999 / currentSize;
+
+      if (ratio < 1) {
+        // if the current resolution creates an image larger than 10 MB, adjust sizeFactor (resolution)
+        // to ensure that image will have a file size of less than 10 MB.
+        sizeFactor = ratio;
+      } else if (videoWidth === 640 && videoHeight === 480) {
+        // otherwise increase the resolution to try and prevent blurry images.
+        sizeFactor = 2;
+      }
+    }
+    return sizeFactor;
+  }
+
  playShutterClick() {
    const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);
    audio.play();
@@ -181,15 +303,33 @@ class Camera extends React.Component {
            autoPlay
            className="camera-video"
            onLoadedData={() => { this.setVideoHasLoaded(); }}
-            style={{ display: this.state.dataUri ? 'none' : 'block' }}
+            style={{
+              display: this.state.dataUri ? 'none' : 'block',
+              WebkitTransform: 'scaleX(-1)',
+              transform: 'scaleX(-1)',
+            }}
+            playsInline
+          />
+          <canvas
+            ref={this.canvasRef}
+            data-testid="detection-canvas"
+            className="canvas-video"
+            style={{
+              display: !this.state.shouldDetect || this.state.dataUri ? 'none' : 'block',
+              WebkitTransform: 'scaleX(-1)',
+              transform: 'scaleX(-1)',
+            }}
+            width="640"
+            height="480"
          />
-          <canvas ref={this.canvasRef} data-testid="detection-canvas" className="canvas-video" style={{ display: !this.state.shouldDetect || this.state.dataUri ? 'none' : 'block' }} height="375" width="500" />
          <img
+            data-hj-suppress
            alt="imgCamera"
            src={this.state.dataUri}
            className="camera-video"
            style={{ display: this.state.dataUri ? 'block' : 'none' }}
          />
+          <div role="status" className="sr-only">{this.state.feedback}</div>
        </div>
        <button
          className={`btn camera-btn ${
--- a/src/id-verification/CameraHelpWithUpload.jsx
+++ b/src/id-verification/CameraHelpWithUpload.jsx
@@ -35,7 +35,7 @@ function CameraHelpWithUpload(props) {
        <p>
          {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
        </p>
-        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} />
+        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
      </Collapsible>
    </div>
  );
--- a/src/id-verification/IdVerification.messages.js
+++ b/src/id-verification/IdVerification.messages.js
@@ -88,14 +88,74 @@ const messages = defineMessages({
  },
  'id.verification.photo.enable.detection.portrait.help.text': {
    id: 'id.verification.photo.enable.detection.portrait.help.text',
-    defaultMessage: 'If checked, a border will appear around the camera view. Your face can be seen clearly if the border is blue. If your face is not in a good position or undetectable, the border will be red.',
+    defaultMessage: 'If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.',
    description: 'Help text that appears for enabling face detection on the portrait photo panel.',
  },
  'id.verification.photo.enable.detection.id.help.text': {
    id: 'id.verification.photo.enable.detection.id.help.text',
-    defaultMessage: 'If checked, a border will appear around the camera view. The face can be seen clearly if the border is blue. If the face is not in a good position or undetectable, the border will be red.',
+    defaultMessage: 'If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.',
    description: 'Help text that appears for enabling face detection on the portrait photo panel.',
  },
+  'id.verification.photo.feedback.correct': {
+    id: 'id.verification.photo.feedback.correct',
+    defaultMessage: 'Face is in a good position.',
+    description: 'Text for screen reader when user\'s face is in a good position.',
+  },
+  'id.verification.photo.feedback.two.faces': {
+    id: 'id.verification.photo.feedback.two.faces',
+    defaultMessage: 'More than one face detected.',
+    description: 'Text for screen reader when more than one face detected.',
+  },
+  'id.verification.photo.feedback.no.faces': {
+    id: 'id.verification.photo.feedback.no.faces',
+    defaultMessage: 'No face detected.',
+    description: 'Text for screen reader when no face detected.',
+  },
+  'id.verification.photo.feedback.top.left': {
+    id: 'id.verification.photo.feedback.top.left',
+    defaultMessage: 'Incorrect position. Top left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.top.center': {
+    id: 'id.verification.photo.feedback.top.center',
+    defaultMessage: 'Incorrect position. Top center.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.top.right': {
+    id: 'id.verification.photo.feedback.top.right',
+    defaultMessage: 'Incorrect position. Top right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.left': {
+    id: 'id.verification.photo.feedback.center.left',
+    defaultMessage: 'Incorrect position. Center left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.center': {
+    id: 'id.verification.photo.feedback.center.center',
+    defaultMessage: 'Incorrect position. Too close to camera.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.right': {
+    id: 'id.verification.photo.feedback.center.right',
+    defaultMessage: 'Incorrect position. Center right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.left': {
+    id: 'id.verification.photo.feedback.bottom.left',
+    defaultMessage: 'Incorrect position. Bottom left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.center': {
+    id: 'id.verification.photo.feedback.bottom.center',
+    defaultMessage: 'Incorrect position. Bottom center.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.right': {
+    id: 'id.verification.photo.feedback.bottom.right',
+    defaultMessage: 'Incorrect position. Bottom right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
  'id.verification.camera.access.title': {
    id: 'id.verification.camera.access.title',
    defaultMessage: 'Camera Permissions',
@@ -403,9 +463,14 @@ const messages = defineMessages({
  },
  'id.verification.id.photo.instructions.upload': {
    id: 'id.verification.id.photo.instructions.upload',
-    defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)',
+    defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)',
    description: 'Instructions for ID photo upload.',
  },
+  'id.verification.id.photo.instructions.upload.error': {
+    id: 'id.verification.id.photo.instructions.upload.error',
+    defaultMessage: 'The file you have selected is too large. Please try again with a file less than 10MB.',
+    description: 'Error message for file upload that is larger than 10MB.',
+  },
  'id.verification.account.name.title': {
    id: 'id.verification.account.name.title',
    defaultMessage: 'Account Name Check',
@@ -506,6 +571,11 @@ const messages = defineMessages({
    defaultMessage: 'Submit',
    description: 'Button to confirm all information is correct and submit.',
  },
+  'id.verification.review.error': {
+    id: 'id.verification.review.error',
+    defaultMessage: 'edX Support Page',
+    description: 'Text linking to the support page.',
+  },
  'id.verification.submitted.title': {
    id: 'id.verification.submitted.title',
    defaultMessage: 'Identity Verification in Progress',
--- a/src/id-verification/IdVerificationContext.jsx
+++ b/src/id-verification/IdVerificationContext.jsx
@@ -45,9 +45,9 @@ function IdVerificationContextProvider({ children }) {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        setMediaAccess(MEDIA_ACCESS.GRANTED);
        setMediaStream(stream);
-        // If we would like to stop the stream immediately. I guess we can leave it open
-        // const tracks = stream.getTracks();
-        // tracks.forEach(track => track.stop());
+        // stop the stream, as we are not using it yet
+        const tracks = stream.getTracks();
+        tracks.forEach(track => track.stop());
      } catch (err) {
        setMediaAccess(MEDIA_ACCESS.DENIED);
      }
--- a/src/id-verification/ImageFileUpload.jsx
+++ b/src/id-verification/ImageFileUpload.jsx
@@ -1,28 +1,52 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
+import { Alert } from '@edx/paragon';
+import messages from './IdVerification.messages';
+
+
+export default function ImageFileUpload({ onFileChange, intl }) {
+  const [fileTooLargeError, setFileTooLargeError] = useState(false);
+  const maxFileSize = 10000000;

-export default function ImageFileUpload({ onFileChange }) {
  const handleChange = useCallback((e) => {
    if (e.target.files.length === 0) {
      return;
    }

    const fileObject = e.target.files[0];
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', () => onFileChange(fileReader.result));
-    fileReader.readAsDataURL(fileObject);
+    if (fileObject.size < maxFileSize) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => onFileChange(fileReader.result));
+      fileReader.readAsDataURL(fileObject);
+    } else {
+      setFileTooLargeError(true);
+    }
  }, []);

  return (
-    <input
-      type="file"
-      accept="image/*"
-      data-testid="fileUpload"
-      onChange={handleChange}
-    />
+    <>
+      <input
+        type="file"
+        accept="image/*"
+        data-testid="fileUpload"
+        onChange={handleChange}
+      />
+      {fileTooLargeError && (
+      <Alert
+        id="fileTooLargeError"
+        variant="danger"
+        tabIndex="-1"
+        style={{ marginTop: '1rem' }}
+      >
+        {intl.formatMessage(messages['id.verification.id.photo.instructions.upload.error'])}
+      </Alert>
+      )}
+    </>
  );
 }

 ImageFileUpload.propTypes = {
  onFileChange: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };
--- a/src/id-verification/ImagePreview.jsx
+++ b/src/id-verification/ImagePreview.jsx
@@ -5,7 +5,7 @@ export default function ImagePreview({ src, alt, id }) {
  return (
    <div id={id} className="image-preview">

-      <img style={{ objectFit: 'contain' }} src={src} alt={alt} />
+      <img data-hj-suppress style={{ objectFit: 'contain' }} src={src} alt={alt} />

    </div>
  );
--- a/src/id-verification/_id-verification.scss
+++ b/src/id-verification/_id-verification.scss
@@ -54,6 +54,7 @@

  .canvas-video {
    width: 100%;
+    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
--- a/src/id-verification/panels/GetNameIdPanel.jsx
+++ b/src/id-verification/panels/GetNameIdPanel.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect, useRef } from 'react';
 import { Form } from '@edx/paragon';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

@@ -11,6 +11,7 @@ import { IdVerificationContext } from '../IdVerificationContext';
 import messages from '../IdVerification.messages';

 function GetNameIdPanel(props) {
+  const { push } = useHistory();
  const panelSlug = 'get-name-id';
  const [nameMatches, setNameMatches] = useState(true);
  const nameInputRef = useRef();
@@ -42,6 +43,15 @@ function GetNameIdPanel(props) {
    }
  }, [nameMatches, blankName]);

+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // If the input is empty, or if no changes have been made to the
+    // mismatching name, the user should not be able to proceed.
+    if (!invalidName && !blankName) {
+      push(nextPanelSlug);
+    }
+  };
+
  return (
    <BasePanel
      name={panelSlug}
@@ -51,7 +61,7 @@ function GetNameIdPanel(props) {
        {props.intl.formatMessage(messages['id.verification.account.name.instructions'])}
      </p>

-      <Form>
+      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label htmlFor="nameMatchesYes">
            {props.intl.formatMessage(messages['id.verification.account.name.radio.label'])}
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { history } from '@edx/frontend-platform';
-import { Input, Button, Spinner } from '@edx/paragon';
+import { Input, Button, Spinner, Alert } from '@edx/paragon';
 import { Link } from 'react-router-dom';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';

@@ -25,6 +25,7 @@ function SummaryPanel(props) {
  } = useContext(IdVerificationContext);
  const nameToBeUsed = idPhotoName || nameOnAccount || '';
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submissionError, setSubmissionError] = useState(false);

  function SubmitButton() {
    async function handleClick() {
@@ -39,6 +40,10 @@ function SummaryPanel(props) {
      if (result.success) {
        stopUserMedia();
        history.push(nextPanelSlug);
+      } else {
+        stopUserMedia();
+        setIsSubmitting(false);
+        setSubmissionError(true);
      }
    }
    return (
@@ -59,6 +64,24 @@ function SummaryPanel(props) {
      name={panelSlug}
      title={props.intl.formatMessage(messages['id.verification.review.title'])}
    >
+      {submissionError &&
+      <Alert
+        variant="danger"
+        data-testid="submission-error"
+        dismissible
+        onClose={() => setSubmissionError(false)}
+      >
+        <FormattedMessage
+          id="idv.submission.alert.error"
+          defaultMessage={`
+            We encountered a technical error while trying to submit ID verification.
+            This might be a temporary issue, so please try again in a few minutes.
+            If the problem persists,
+            please go to {support_link} for help.
+          `}
+          values={{ support_link: <Alert.Link href="https://support.edx.org/hc/en-us">{props.intl.formatMessage(messages['id.verification.review.error'])}</Alert.Link> }}
+        />
+      </Alert>}
      <p>
        {props.intl.formatMessage(messages['id.verification.review.description'])}
      </p>
--- a/src/id-verification/tests/Camera.test.jsx
+++ b/src/id-verification/tests/Camera.test.jsx
@@ -4,12 +4,16 @@ import { createMemoryHistory } from 'history';
 import '@testing-library/jest-dom/extend-expect';
 import { render, cleanup, screen, act, fireEvent } from '@testing-library/react';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import * as cocoSsd from '@tensorflow-models/coco-ssd';
+import * as blazeface from '@tensorflow-models/blazeface';
+import * as analytics from '@edx/frontend-platform/analytics';
 import { IdVerificationContext } from '../IdVerificationContext';
 import Camera from '../Camera';

 jest.mock('jslib-html5-camera-photo');
-jest.mock('@tensorflow-models/coco-ssd');
+jest.mock('@tensorflow-models/blazeface');
+jest.mock('@edx/frontend-platform/analytics');
+
+analytics.sendTrackEvent = jest.fn();

 window.HTMLMediaElement.prototype.play = () => {};

@@ -81,7 +85,7 @@ describe('SubmittedPanel', () => {
  });

  it('shows spinner when loading face detection', async () => {
-    cocoSsd.load = jest.fn().mockResolvedValue({ detect: jest.fn().mockResolvedValue([]) });
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
    await act(async () => render((
      <Router history={history}>
        <IntlProvider locale="en">
@@ -99,7 +103,7 @@ describe('SubmittedPanel', () => {
  });

  it('canvas is visible when detection is enabled', async () => {
-    cocoSsd.load = jest.fn().mockResolvedValue({ detect: jest.fn().mockResolvedValue([]) });
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
    await act(async () => render((
      <Router history={history}>
        <IntlProvider locale="en">
@@ -118,7 +122,8 @@ describe('SubmittedPanel', () => {
  });

  it('blazeface is called when detection is enabled', async () => {
-    cocoSsd.load = jest.fn().mockResolvedValue({ detect: jest.fn().mockResolvedValue([]) });
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
    await act(async () => render((
      <Router history={history}>
        <IntlProvider locale="en">
@@ -132,6 +137,48 @@ describe('SubmittedPanel', () => {
    await fireEvent.loadedData(screen.queryByTestId('video'));
    const checkbox = await screen.findByLabelText('Enable Face Detection');
    await fireEvent.click(checkbox);
-    setTimeout(() => { expect(cocoSsd.load).toHaveBeenCalled(); }, 2000);
+    setTimeout(() => { expect(blazeface.load).toHaveBeenCalled(); }, 2000);
+  });
+
+  it('sends tracking events on portrait photo page', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_enabled');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_disabled');
+  });
+
+  it('sends tracking events on id photo page', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...idProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_enabled');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
  });
 });
--- a/src/id-verification/tests/panels/SummaryPanel.test.jsx
+++ b/src/id-verification/tests/panels/SummaryPanel.test.jsx
@@ -5,7 +5,7 @@ import { render, cleanup, act, screen, fireEvent, waitFor } from '@testing-libra
 import '@edx/frontend-platform/analytics';
 import '@testing-library/jest-dom/extend-expect';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { submitIdVerification } from '../../data/service';
+import * as dataService from '../../data/service';
 import { IdVerificationContext } from '../../IdVerificationContext';
 import SummaryPanel from '../../panels/SummaryPanel';

@@ -13,9 +13,8 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
 }));

-jest.mock('../../data/service', () => ({
-  submitIdVerification: jest.fn(() => ({ success: true, message: null })),
-}));
+jest.mock('../../data/service');
+dataService.submitIdVerification = jest.fn().mockReturnValue({ success: true });

 const IntlSummaryPanel = injectIntl(SummaryPanel);

@@ -74,7 +73,26 @@ describe('SummaryPanel', () => {
  it('submits', async () => {
    const button = await screen.findByTestId('submit-button');
    fireEvent.click(button);
-    expect(submitIdVerification).toHaveBeenCalled();
-    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled())
+    expect(dataService.submitIdVerification).toHaveBeenCalled();
+    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
+  });
+
+  it('shows error when cannot submit', async () => {
+    await cleanup();
+    dataService.submitIdVerification = jest.fn().mockReturnValue({ success: false });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSummaryPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    expect(dataService.submitIdVerification).toHaveBeenCalled();
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toBeDefined();
  });
 });
Author	SHA1	Message	Date
morenol	8602561e55	fix: Update frontend-build (#340 ) Update frontend-platform	2020-11-10 17:18:02 -05:00
Renovate Bot	b310574f18	fix(deps): update font awesome	2020-11-10 02:00:05 +00:00
Renovate Bot	73badaf916	fix(deps): update dependency universal-cookie to v4.0.4	2020-11-10 00:58:25 +00:00
Renovate Bot	f02cc43078	chore(deps): update dependency enzyme-adapter-react-16 to v1.15.5	2020-11-09 23:36:50 +00:00
edX Transifex Bot	bd5c2343be	fix(i18n): update translations	2020-11-08 16:03:56 -05:00
alangsto	6349d487e4	Merge pull request #343 from edx/alangsto/camera_permissions Ensure that first stream is stopped	2020-11-05 14:40:40 -05:00
Alie Langston	9c6137e668	testing to see if we need to request front/back camera stopping initial stream	2020-11-05 14:30:39 -05:00
alangsto	2cf01270d7	Merge pull request #342 from edx/alangsto/fix_camera_access Remove browser based resolution	2020-11-04 13:15:26 -05:00
Alie Langston	403df8926d	removed browser based resolution, and instead optimized photo for all browsers completed comment	2020-11-04 13:01:14 -05:00
Bianca Severino	4bd96c70af	Merge pull request #341 from edx/bseverino/name-change-fix Fix onSubmit for IDV name change form	2020-10-27 12:32:30 -04:00
Bianca Severino	d2a835f560	Fix submit functionality on name change form	2020-10-27 12:13:47 -04:00
Bianca Severino	d0b5d54d0a	Merge pull request #339 from edx/bseverino/id-resolution Increase camera resolution to 1080p for ID verification	2020-10-20 14:17:51 -04:00
Bianca Severino	26299eed65	Increase camera resolution to 1080p	2020-10-20 13:53:01 -04:00
adeelehsan	648bea8d84	Merge pull request #338 from edx/aehsan/suppressred_pii_for_accounts suppressed pii for account	2020-10-09 01:59:13 +05:00
adeelehsan	7409f02056	suppressed pii for account	2020-10-09 00:54:07 +05:00
alangsto	f5dd409816	Merge pull request #337 from edx/alangsto/add_tracking_events Add tracking events for face detection	2020-10-01 15:32:36 -04:00
Alie Langston	6ddac11dc0	added tracking events added testing	2020-10-01 14:19:07 -04:00
adeelehsan	7019aea4fb	Merge pull request #333 from edx/aehsan/van-23/suppressed_pii_for_accounts suppressed pii for hot jar	2020-09-25 17:33:37 +05:00
adeelehsan	5424434599	suppressed pii for hot jar VAN-23	2020-09-25 17:22:13 +05:00
edX Transifex Bot	8ca9dc78a9	fix(i18n): update translations	2020-09-20 17:06:06 -04:00
alangsto	30e25b96bb	Merge pull request #332 from edx/alangsto/add_realtime_feedback Add realtime feedback for screenreaders during face detection	2020-09-16 15:31:00 -04:00
Alie Langston	1d01abc7da	added feedback for screenreaders moved settings state back to original fixed status updates updated message for more clarity renamed variables for clarity added comment fixed variables fixed variable again decreased delay between feedbacks updated comment	2020-09-16 15:22:04 -04:00
alangsto	917152df22	Merge pull request #330 from edx/alangsto/remove_survey Removed SurveyMonkey survey	2020-09-15 16:35:45 -04:00
Alie Langston	961c0feb78	removed SurveyMonkey survey	2020-09-15 16:04:46 -04:00
edX Transifex Bot	7d57d86729	fix(i18n): update translations	2020-09-13 17:04:11 -04:00
alangsto	34c5de1340	Merge pull request #324 from edx/alangsto/add_idv_survey Added SurveyMonkey Survey to IDV submitted page	2020-09-10 15:42:59 -04:00
Alie Langston	81d604d046	adding second round of survey to IDV summary page	2020-09-10 15:22:21 -04:00
Michael Roytman	e6f7e83cf5	Merge pull request #322 from edx/mroytman/use-better-camera-mobile use 'environment' facing mode when using the camera in the ID photo c…	2020-09-10 14:45:30 -04:00
Michael Roytman	a970e17070	use 'environment' facing mode when using the camera in the ID photo context; this will open the rear facing camera on mobile	2020-09-10 14:33:42 -04:00
alangsto	f471ae0aa7	Merge pull request #323 from edx/alangsto/add_error_messaging Added error messaging for image upload and idv submission	2020-09-10 14:29:20 -04:00
Alie Langston	b9efe6faee	added error messaging for image upload and idv submission updated testing wrapped button click moved maximum file size to a const variable	2020-09-10 14:23:35 -04:00
edX Transifex Bot	2dbccec1f1	fix(i18n): update translations	2020-09-06 17:03:58 -04:00
Michael Roytman	9f38b975d9	Merge pull request #318 from edx/mroytman/fix-iOS-camera-bug-popout add playsInline attribute to video element to ensure it does not pop out into full screen video on iOS Safari	2020-09-04 14:54:29 -04:00
Michael Roytman	ae355cefcf	add playsInline attribute to video element to ensure it does not pop out into full screen video on iOS Safari	2020-09-04 14:03:29 -04:00
alangsto	d63dfc929f	Merge pull request #317 from edx/alangsto/fix_camera_resolution Added logic for adjusting image resolution	2020-09-03 14:11:13 -04:00
Alie Langston	64be9edeac	adjusted size factor based on camera resolution added additional check so that tests pass updates for requested changes	2020-09-03 14:05:36 -04:00
alangsto	5f4f82eae1	Merge pull request #315 from edx/alangsto/blazeface_fix Fix for blazeface/camera issue	2020-09-02 10:43:40 -04:00
Alie Langston	c8c7352549	updated camera and canvas ratio to match, and updated ranges for landmarks	2020-09-02 10:34:23 -04:00
Renovate Bot	88206e4282	fix(deps): update dependency @tensorflow/tfjs-core to v1.6.1	2020-09-01 22:56:01 +00:00
Renovate Bot	d8e23b1a02	fix(deps): update dependency @tensorflow/tfjs-converter to v1.6.1	2020-09-01 21:58:04 +00:00
alangsto	5db21d2483	Merge pull request #302 from edx/alangsto/add_object_tracking added object tracking	2020-09-01 16:48:39 -04:00
Alie Langston	526d6114f2	added object tracking moved load of library updated test removed async trying to retest Retesting added test back fixed errors due to next button removed try catch so errors occur added try catch back added in ignore readded libraries stops detection when photo is taken, stops erroring issue added help text added spinner and better mocked blazeface moved img element back to correct place updated for requested changes updates for requested changes added timeout for test updated blazeface to pull from forked repo, and added changes based on accessibility feedback	2020-09-01 15:54:20 -04:00