fix: updated package-lock to resolve dependency tree issue

fix(deps): update react monorepo to v18
Merge pull request #673 from openedx/abdullahwaheed/eslint-issues-fix
2022-10-26 16:13:58 +05:00 · 2022-10-24 14:31:23 +00:00 · 2022-10-24 18:02:37 +05:00 · 2022-10-24 15:53:58 +05:00 · 2022-10-24 08:26:58 +00:00 · 2022-10-17 08:57:06 +00:00
47 changed files with 502 additions and 503 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,10 +43,10 @@
        "memoize-one": "5.2.1",
        "prop-types": "15.7.2",
        "qs": "6.10.3",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
        "react-helmet": "6.1.0",
-        "react-redux": "7.2.8",
+        "react-redux": "7.2.9",
        "react-router": "5.2.1",
        "react-router-dom": "5.3.0",
        "react-router-hash-link": "1.2.2",
@@ -57,19 +57,19 @@
        "redux-logger": "3.0.6",
        "redux-saga": "1.1.3",
        "redux-thunk": "2.3.0",
-        "regenerator-runtime": "0.13.9",
+        "regenerator-runtime": "0.13.10",
        "reselect": "4.0.0",
        "universal-cookie": "4.0.4"
      },
      "devDependencies": {
        "@edx/browserslist-config": "1.1.1",
-        "@edx/frontend-build": "12.0.6",
+        "@edx/frontend-build": "12.3.0",
        "@edx/reactifex": "1.1.0",
        "@testing-library/jest-dom": "5.16.5",
        "@testing-library/react": "12.1.5",
        "enzyme": "3.11.0",
        "enzyme-adapter-react-16": "1.15.6",
-        "react-test-renderer": "16.14.0",
+        "react-test-renderer": "18.2.0",
        "reactifex": "1.1.1",
        "redux-mock-store": "1.5.4"
      }
@@ -1964,9 +1964,9 @@
      }
    },
    "node_modules/@edx/frontend-build": {
-      "version": "12.0.6",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.0.6.tgz",
-      "integrity": "sha512-pmDUTA8XLMV1+xBi5hfsje4zqBsDYmp10/tYTG60kxG2EhXRz1sEt8j1uCIli37hXjMkFBWLkSH2J9njVbuPDQ==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.3.0.tgz",
+      "integrity": "sha512-GewVd5qD59d8hHZFnXyS5jWkDY8TWYENqO5dd+/Kmu7cmjKrp69PKmNyVs+QgZEADodYI5UT48A2LhsDZjDx7A==",
      "dev": true,
      "dependencies": {
        "@babel/cli": "7.16.0",
@@ -5585,6 +5585,7 @@
      "version": "0.21.4",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
      "dependencies": {
        "follow-redirects": "^1.14.0"
      }
@@ -8893,6 +8894,31 @@
        "react-dom": "^16.0.0-0"
      }
    },
+    "node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
+      "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.19.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0"
+      }
+    },
+    "node_modules/enzyme-adapter-react-16/node_modules/scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
    "node_modules/enzyme-adapter-react-16/node_modules/semver": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -15614,12 +15640,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -17785,17 +17805,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
    "node_modules/portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -18693,13 +18702,11 @@
      }
    },
    "node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
@@ -18909,17 +18916,15 @@
      }
    },
    "node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
      "dependencies": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.0"
      },
      "peerDependencies": {
-        "react": "^16.14.0"
+        "react": "^18.2.0"
      }
    },
    "node_modules/react-error-overlay": {
@@ -19079,9 +19084,9 @@
      "integrity": "sha1-acLVdB5t9eCPIw82u8KUTuEiJVU="
    },
    "node_modules/react-redux": {
-      "version": "7.2.8",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
-      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
      "dependencies": {
        "@babel/runtime": "^7.15.4",
        "@types/react-redux": "^7.1.20",
@@ -19242,6 +19247,19 @@
        "react-dom": ">=0.14.0"
      }
    },
+    "node_modules/react-shallow-renderer": {
+      "version": "16.15.0",
+      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
+      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-side-effect": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
@@ -19285,20 +19303,25 @@
      }
    },
    "node_modules/react-test-renderer": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
-      "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
+      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
      "dev": true,
      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.8.6",
-        "scheduler": "^0.19.1"
+        "react-is": "^18.2.0",
+        "react-shallow-renderer": "^16.15.0",
+        "scheduler": "^0.23.0"
      },
      "peerDependencies": {
-        "react": "^16.14.0"
+        "react": "^18.2.0"
      }
    },
+    "node_modules/react-test-renderer/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -19578,9 +19601,9 @@
      }
    },
    "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.10",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
    },
    "node_modules/regenerator-transform": {
      "version": "0.15.0",
@@ -20307,12 +20330,11 @@
      }
    },
    "node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      }
    },
    "node_modules/schema-utils": {
@@ -22216,7 +22238,7 @@
      "version": "4.7.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "devOptional": true,
+      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -24931,13 +24953,12 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-3.1.0.tgz",
      "integrity": "sha512-Okv8vkmX+qe+joD7h9DcT9JdRIyy6jJSVWbIHr2dAHKuk5swVFO92JvhC2pYtMg2EPKA1P1Hmz8cmmfw6QoTZw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@edx/frontend-build": {
-      "version": "12.0.6",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.0.6.tgz",
-      "integrity": "sha512-pmDUTA8XLMV1+xBi5hfsje4zqBsDYmp10/tYTG60kxG2EhXRz1sEt8j1uCIli37hXjMkFBWLkSH2J9njVbuPDQ==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.3.0.tgz",
+      "integrity": "sha512-GewVd5qD59d8hHZFnXyS5jWkDY8TWYENqO5dd+/Kmu7cmjKrp69PKmNyVs+QgZEADodYI5UT48A2LhsDZjDx7A==",
      "dev": true,
      "requires": {
        "@babel/cli": "7.16.0",
@@ -26289,8 +26310,7 @@
    "@restart/context": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
-      "requires": {}
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
    },
    "@restart/hooks": {
      "version": "0.4.7",
@@ -26329,57 +26349,49 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz",
      "integrity": "sha512-jDBKArXYO1u0B1dmd2Nf8Oy6aTF5vLDfLoO9Oon/GLkqZ/NiggYWZA+a2HpUMH4ITwNqS3z43k8LWApB8S583w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-remove-jsx-attribute": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.3.1.tgz",
      "integrity": "sha512-dQzyJ4prwjcFd929T43Z8vSYiTlTu8eafV40Z2gO7zy/SV5GT+ogxRJRBIKWomPBOiaVXFg3jY4S5hyEN3IBjQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-remove-jsx-empty-expression": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.3.1.tgz",
      "integrity": "sha512-HBOUc1XwSU67fU26V5Sfb8MQsT0HvUyxru7d0oBJ4rA2s4HW3PhyAPC7fV/mdsSGpAvOdd8Wpvkjsr0fWPUO7A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-replace-jsx-attribute-value": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.3.1.tgz",
      "integrity": "sha512-C12e6aN4BXAolRrI601gPn5MDFCRHO7C4TM8Kks+rDtl8eEq+NN1sak0eAzJu363x3TmHXdZn7+Efd2nr9I5dA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-svg-dynamic-title": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.3.1.tgz",
      "integrity": "sha512-6NU55Mmh3M5u2CfCCt6TX29/pPneutrkJnnDCHbKZnjukZmmgUAZLtZ2g6ZoSPdarowaQmAiBRgAHqHmG0vuqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-svg-em-dimensions": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.3.1.tgz",
      "integrity": "sha512-HV1NGHYTTe1vCNKlBgq/gKuCSfaRlKcHIADn7P8w8U3Zvujdw1rmusutghJ1pZJV7pDt3Gt8ws+SVrqHnBO/Qw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-transform-react-native-svg": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.3.1.tgz",
      "integrity": "sha512-2wZhSHvTolFNeKDAN/ZmIeSz2O9JSw72XD+o2bNp2QAaWqa8KGpn5Yk5WHso6xqfSAiRzAE+GXlsrBO4UP9LLw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-plugin-transform-svg-component": {
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.3.1.tgz",
      "integrity": "sha512-cZ8Tr6ZAWNUFfDeCKn/pGi976iWSkS8ijmEYKosP+6ktdZ7lW9HVLHojyusPw3w0j8PI4VBeWAXAmi/2G7owxw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@svgr/babel-preset": {
      "version": "6.3.1",
@@ -26485,14 +26497,12 @@
    "@tensorflow-models/blazeface": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/@tensorflow-models/blazeface/-/blazeface-0.0.7.tgz",
-      "integrity": "sha512-+hInPkvHJoubfiXlmNuF3SCucZvU6W1PMC25IV99NSAftJUpKvLokfF93iX8UkOFQCXkPFbnLKacGfGlbjgvMw==",
-      "requires": {}
+      "integrity": "sha512-+hInPkvHJoubfiXlmNuF3SCucZvU6W1PMC25IV99NSAftJUpKvLokfF93iX8UkOFQCXkPFbnLKacGfGlbjgvMw=="
    },
    "@tensorflow/tfjs-converter": {
      "version": "3.18.0",
      "resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-3.18.0.tgz",
-      "integrity": "sha512-hpChA+zVNQOVwRnCfqDb1WI9jbEAKA6DuEm4m75Zb3dIlE6VVooDmAaHBhlc++z2q2G1sBzF9A4Bv48SUpN6vA==",
-      "requires": {}
+      "integrity": "sha512-hpChA+zVNQOVwRnCfqDb1WI9jbEAKA6DuEm4m75Zb3dIlE6VVooDmAaHBhlc++z2q2G1sBzF9A4Bv48SUpN6vA=="
    },
    "@tensorflow/tfjs-core": {
      "version": "3.18.0",
@@ -27369,8 +27379,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@webpack-cli/info": {
      "version": "1.5.0",
@@ -27385,8 +27394,7 @@
      "version": "1.7.0",
      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
@@ -27444,15 +27452,13 @@
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "acorn-jsx": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "acorn-walk": {
      "version": "7.2.0",
@@ -27556,8 +27562,7 @@
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "ansi-escapes": {
      "version": "4.3.2",
@@ -27833,6 +27838,7 @@
      "version": "0.21.4",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
      "requires": {
        "follow-redirects": "^1.14.0"
      }
@@ -28634,8 +28640,7 @@
    "bootstrap": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
-      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
-      "requires": {}
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og=="
    },
    "bowser": {
      "version": "2.11.0",
@@ -29469,8 +29474,7 @@
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "css-loader": {
      "version": "5.2.7",
@@ -29623,8 +29627,7 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "csso": {
      "version": "4.2.0",
@@ -30430,6 +30433,28 @@
        "semver": "^5.7.0"
      },
      "dependencies": {
+        "react-test-renderer": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
+          "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.8.6",
+            "scheduler": "^0.19.1"
+          }
+        },
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        },
        "semver": {
          "version": "5.7.1",
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -31023,8 +31048,7 @@
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "eslint-scope": {
      "version": "5.1.1",
@@ -32866,8 +32890,7 @@
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "identity-obj-proxy": {
      "version": "3.0.0",
@@ -34748,8 +34771,7 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "jest-regex-util": {
      "version": "26.0.0",
@@ -35500,12 +35522,6 @@
        }
      }
    },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-      "peer": true
-    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -37167,12 +37183,6 @@
        }
      }
    },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "peer": true
-    },
    "portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -37248,29 +37258,25 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-duplicates": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-empty": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-overridden": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-loader": {
      "version": "6.1.1",
@@ -37375,8 +37381,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-modules-local-by-default": {
      "version": "4.0.0",
@@ -37411,8 +37416,7 @@
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-normalize-display-values": {
      "version": "5.1.0",
@@ -37796,13 +37800,11 @@
      }
    },
    "react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
      }
    },
    "react-bootstrap": {
@@ -37959,14 +37961,12 @@
      }
    },
    "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
      "requires": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.0"
      }
    },
    "react-error-overlay": {
@@ -38086,9 +38086,9 @@
      "integrity": "sha1-acLVdB5t9eCPIw82u8KUTuEiJVU="
    },
    "react-redux": {
-      "version": "7.2.8",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
-      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
      "requires": {
        "@babel/runtime": "^7.15.4",
        "@types/react-redux": "^7.1.20",
@@ -38192,11 +38192,20 @@
        "prop-types": "^15.5.10"
      }
    },
+    "react-shallow-renderer": {
+      "version": "16.15.0",
+      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
+      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "react-side-effect": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "requires": {}
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
    },
    "react-style-singleton": {
      "version": "2.2.0",
@@ -38211,19 +38220,25 @@
    "react-table": {
      "version": "7.8.0",
      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
-      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==",
-      "requires": {}
+      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA=="
    },
    "react-test-renderer": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
-      "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
+      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
      "dev": true,
      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.8.6",
-        "scheduler": "^0.19.1"
+        "react-is": "^18.2.0",
+        "react-shallow-renderer": "^16.15.0",
+        "scheduler": "^0.23.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
+        }
      }
    },
    "react-transition-group": {
@@ -38401,8 +38416,7 @@
    "redux-devtools-extension": {
      "version": "2.13.9",
      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
-      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
-      "requires": {}
+      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A=="
    },
    "redux-logger": {
      "version": "3.0.6",
@@ -38455,9 +38469,9 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.10",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
    },
    "regenerator-transform": {
      "version": "0.15.0",
@@ -39004,12 +39018,11 @@
      }
    },
    "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      }
    },
    "schema-utils": {
@@ -40547,7 +40560,7 @@
      "version": "4.7.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "devOptional": true
+      "dev": true
    },
    "typescript-compare": {
      "version": "0.0.2",
@@ -41320,8 +41333,7 @@
          "version": "8.8.1",
          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==",
-          "dev": true,
-          "requires": {}
+          "dev": true
        }
      }
    },
@@ -41493,8 +41505,7 @@
      "version": "7.5.9",
      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "xml-name-validator": {
      "version": "3.0.0",
--- a/package.json
+++ b/package.json
@@ -61,10 +61,10 @@
    "memoize-one": "5.2.1",
    "prop-types": "15.7.2",
    "qs": "6.10.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
    "react-helmet": "6.1.0",
-    "react-redux": "7.2.8",
+    "react-redux": "7.2.9",
    "react-router": "5.2.1",
    "react-router-dom": "5.3.0",
    "react-router-hash-link": "1.2.2",
@@ -75,19 +75,19 @@
    "redux-logger": "3.0.6",
    "redux-saga": "1.1.3",
    "redux-thunk": "2.3.0",
-    "regenerator-runtime": "0.13.9",
+    "regenerator-runtime": "0.13.10",
    "reselect": "4.0.0",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "12.0.6",
+    "@edx/frontend-build": "12.3.0",
    "@edx/reactifex": "1.1.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "18.2.0",
    "reactifex": "1.1.1",
    "redux-mock-store": "1.5.4"
  }
--- a/src/account-settings/Alert.jsx
+++ b/src/account-settings/Alert.jsx
@@ -2,18 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

-function Alert(props) {
-  return (
-    <div className={classNames('alert d-flex align-items-start', props.className)}>
-      <div>
-        {props.icon}
-      </div>
-      <div>
-        {props.children}
-      </div>
+const Alert = (props) => (
+  <div className={classNames('alert d-flex align-items-start', props.className)}>
+    <div>
+      {props.icon}
    </div>
-  );
-}
+    <div>
+      {props.children}
+    </div>
+  </div>
+);

 Alert.propTypes = {
  className: PropTypes.string,
--- a/src/account-settings/DOBForm.jsx
+++ b/src/account-settings/DOBForm.jsx
@@ -10,7 +10,7 @@ import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
 import { editableFieldSelector } from './data/selectors';
 import { saveSettingsReset } from './data/actions';

-function DOBModal(props) {
+const DOBModal = (props) => {
  const {
    saveState,
    error,
@@ -131,7 +131,7 @@ function DOBModal(props) {
      </ModalDialog>
    </>
  );
-}
+};

 DOBModal.propTypes = {
  saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -20,7 +20,7 @@ import {
 import { editableFieldSelector } from './data/selectors';
 import CertificatePreference from './certificate-preference/CertificatePreference';

-function EditableField(props) {
+const EditableField = (props) => {
  const {
    name,
    label,
@@ -179,7 +179,7 @@ function EditableField(props) {
      }}
    />
  );
-}
+};

 EditableField.propTypes = {
  name: PropTypes.string.isRequired,
--- a/src/account-settings/EmailField.jsx
+++ b/src/account-settings/EmailField.jsx
@@ -18,7 +18,7 @@ import {
 } from './data/actions';
 import { editableFieldSelector } from './data/selectors';

-function EmailField(props) {
+const EmailField = (props) => {
  const {
    name,
    label,
@@ -169,7 +169,7 @@ function EmailField(props) {
      }}
    />
  );
-}
+};

 EmailField.propTypes = {
  name: PropTypes.string.isRequired,
--- a/src/account-settings/JumpNav.jsx
+++ b/src/account-settings/JumpNav.jsx
@@ -8,10 +8,10 @@ import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
 import messages from './AccountSettingsPage.messages';

-function JumpNav({
+const JumpNav = ({
  intl,
  displayDemographicsLink,
-}) {
+}) => {
  const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
  return (
    <div className={classNames('jump-nav', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
@@ -69,7 +69,7 @@ function JumpNav({
      </Scrollspy>
    </div>
  );
-}
+};

 JumpNav.propTypes = {
  intl: intlShape.isRequired,
--- a/src/account-settings/NotFoundPage.jsx
+++ b/src/account-settings/NotFoundPage.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

-export default function NotFoundPage() {
-  return (
-    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-      <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
-        <FormattedMessage
-          id="error.notfound.message"
-          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-          description="Error message when a page does not exist"
-        />
-      </p>
-    </div>
-  );
-}
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
+      <FormattedMessage
+        id="error.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="Error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;
--- a/src/account-settings/OneTimeDismissibleAlert.jsx
+++ b/src/account-settings/OneTimeDismissibleAlert.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

 import { Alert } from '@edx/paragon';

-export default function OneTimeDismissibleAlert(props) {
+const OneTimeDismissibleAlert = (props) => {
  const [dismissed, setDismissed] = useState(localStorage.getItem(props.id) !== 'true');

  const onClose = () => {
@@ -25,7 +25,7 @@ export default function OneTimeDismissibleAlert(props) {
      </p>
    </Alert>
  );
-}
+};

 OneTimeDismissibleAlert.propTypes = {
  id: PropTypes.string.isRequired,
@@ -41,3 +41,5 @@ OneTimeDismissibleAlert.defaultProps = {
  header: undefined,
  body: undefined,
 };
+
+export default OneTimeDismissibleAlert;
--- a/src/account-settings/SwitchContent.jsx
+++ b/src/account-settings/SwitchContent.jsx
@@ -22,7 +22,7 @@ const onChildExit = (htmlNode) => {
  }
 };

-function SwitchContent({ expression, cases, className }) {
+const SwitchContent = ({ expression, cases, className }) => {
  const getContent = (caseKey) => {
    if (cases[caseKey]) {
      if (typeof cases[caseKey] === 'string') {
@@ -48,7 +48,7 @@ function SwitchContent({ expression, cases, className }) {
      {getContent(expression)}
    </TransitionReplace>
  );
-}
+};

 SwitchContent.propTypes = {
  expression: PropTypes.string,
--- a/src/account-settings/certificate-preference/CertificatePreference.jsx
+++ b/src/account-settings/certificate-preference/CertificatePreference.jsx
@@ -21,14 +21,14 @@ import { certPreferenceSelector } from '../data/selectors';
 import commonMessages from '../AccountSettingsPage.messages';
 import messages from './messages';

-function CertificatePreference({
+const CertificatePreference = ({
  intl,
  fieldName,
  originalFullName,
  originalVerifiedName,
  saveState,
  useVerifiedNameForCerts,
-}) {
+}) => {
  const dispatch = useDispatch();
  const [checked, setChecked] = useState(false);
  const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -152,7 +152,7 @@ function CertificatePreference({
      </ModalDialog>
    </>
  ) : null;
-}
+};

 CertificatePreference.propTypes = {
  intl: intlShape.isRequired,
--- a/src/account-settings/coaching/CoachingConsent.jsx
+++ b/src/account-settings/coaching/CoachingConsent.jsx
@@ -17,28 +17,24 @@ import LogoSVG from '../../logo.svg';
 import { fetchSettings } from '../data/actions';
 import { coachingConsentPageSelector } from '../data/selectors';

-function Logo({ src, alt, ...attributes }) {
-  return <img src={src} alt={alt} {...attributes} />;
-}
+const Logo = ({ src, alt, ...attributes }) => <img src={src} alt={alt} {...attributes} />;

-function SuccessMessage(props) {
-  return (
-    <div className="col-12 col-lg-6 shadow-lg mx-auto mt-4 p-5">
-      <FontAwesomeIcon className="text-success" icon={faCheck} size="5x" />
-      <div className="h3">{props.header}</div>
-      <div>{props.message}</div>
-      <Hyperlink destination={props.continueUrl} className="d-block p-2 my-3 text-center text-white bg-primary rounded">
-        {props.continue}
-      </Hyperlink>
-    </div>
-  );
-}
+const SuccessMessage = (props) => (
+  <div className="col-12 col-lg-6 shadow-lg mx-auto mt-4 p-5">
+    <FontAwesomeIcon className="text-success" icon={faCheck} size="5x" />
+    <div className="h3">{props.header}</div>
+    <div>{props.message}</div>
+    <Hyperlink destination={props.continueUrl} className="d-block p-2 my-3 text-center text-white bg-primary rounded">
+      {props.continue}
+    </Hyperlink>
+  </div>
+);

-function AutoRedirect(props) {
+const AutoRedirect = (props) => {
  window.location.href = props.redirectUrl;
  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <></>;
-}
+};

 const VIEWS = {
  NOT_LOADED: 'NOT_LOADED',
--- a/src/account-settings/coaching/CoachingConsentForm.jsx
+++ b/src/account-settings/coaching/CoachingConsentForm.jsx
@@ -8,86 +8,80 @@ import PropTypes from 'prop-types';
 import Alert from '../Alert';
 import messages from './CoachingConsent.messages';

-function ErrorMessage(props) {
-  return <div className="alert-warning mb-2">{props.message}</div>;
-}
+const ErrorMessage = (props) => <div className="alert-warning mb-2">{props.message}</div>;

-function ManagedProfileAlert({ profileDataManager }) {
-  return (
-    <Alert className="alert alert-primary" role="alert">
-      <FormattedMessage
-        id="account.settings.coaching.managed.alert"
-        defaultMessage="Your name is managed by {managerTitle}. Contact your administrator for help."
-        description="Alert message informing the user their account data is managed by a third party"
-        values={{
-          managerTitle: <b>{profileDataManager}</b>,
-        }}
-      />
-    </Alert>
-  );
-}
-function CoachingForm(props) {
-  return (
-    <div className="col-12 col-md-6 col-xl-5 mx-auto mt-4 p-5 shadow-lg">
-      <h2 className="h2">
-        {props.intl.formatMessage(messages['account.settings.coaching.consent.welcome.header'])}
-      </h2>
-      <p>{props.intl.formatMessage(messages['account.settings.coaching.consent.description'])}</p>
-      <div>
-        <form onSubmit={props.onSubmit}>
-          <div className="py-3">
-            {!!props.profileDataManager && (
-              <ManagedProfileAlert profileDataManager={props.profileDataManager} />
-            )}
-            <ErrorMessage message={props.formErrors.full_name} />
-            <label className="h6" htmlFor="fullName">
-              {props.intl.formatMessage(messages['account.settings.coaching.consent.label.name'])}
-            </label>
-            <Input
-              type="text"
-              name="full-name"
-              id="fullName"
-              disabled={!!props.profileDataManager}
-              defaultValue={props.formValues.name}
-            />
-          </div>
-          <div className="py-3">
-            <ErrorMessage message={props.formErrors.phone_number} />
-            <label className="h6" htmlFor="phoneNumber">
-              {props.intl.formatMessage(messages['account.settings.coaching.consent.label.phone-number'])}
-            </label>
-            <Input
-              type="text"
-              name="phone_number"
-              id="phoneNumber"
-              defaultValue={props.formValues.phone_number}
-            />
-          </div>
-          <div className=" py-3">
-            <p className="small font-italic">
-              {props.intl.formatMessage(messages['account.settings.coaching.consent.text-messaging.disclaimer'])}
-            </p>
-          </div>
-          <ErrorMessage message={props.formErrors.coaching} />
-          <div className="d-flex flex-column align-items-center">
-            <Button variant="outline-primary" className="w-100" type="submit">
-              {props.intl.formatMessage(messages['account.settings.coaching.consent.accept-coaching'])}
-            </Button>
-          </div>
-          <div className="mt-3">
-            <Hyperlink
-              className="mt-3 text-dark btn-link small"
-              destination={props.redirectUrl}
-              onClick={props.declineCoaching}
-            >
-              {props.intl.formatMessage(messages['account.settings.coaching.consent.decline-coaching'])}
-            </Hyperlink>
-          </div>
-        </form>
-      </div>
+const ManagedProfileAlert = ({ profileDataManager }) => (
+  <Alert className="alert alert-primary" role="alert">
+    <FormattedMessage
+      id="account.settings.coaching.managed.alert"
+      defaultMessage="Your name is managed by {managerTitle}. Contact your administrator for help."
+      description="Alert message informing the user their account data is managed by a third party"
+      values={{
+        managerTitle: <b>{profileDataManager}</b>,
+      }}
+    />
+  </Alert>
+);
+const CoachingForm = (props) => (
+  <div className="col-12 col-md-6 col-xl-5 mx-auto mt-4 p-5 shadow-lg">
+    <h2 className="h2">
+      {props.intl.formatMessage(messages['account.settings.coaching.consent.welcome.header'])}
+    </h2>
+    <p>{props.intl.formatMessage(messages['account.settings.coaching.consent.description'])}</p>
+    <div>
+      <form onSubmit={props.onSubmit}>
+        <div className="py-3">
+          {!!props.profileDataManager && (
+          <ManagedProfileAlert profileDataManager={props.profileDataManager} />
+          )}
+          <ErrorMessage message={props.formErrors.full_name} />
+          <label className="h6" htmlFor="fullName">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.label.name'])}
+          </label>
+          <Input
+            type="text"
+            name="full-name"
+            id="fullName"
+            disabled={!!props.profileDataManager}
+            defaultValue={props.formValues.name}
+          />
+        </div>
+        <div className="py-3">
+          <ErrorMessage message={props.formErrors.phone_number} />
+          <label className="h6" htmlFor="phoneNumber">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.label.phone-number'])}
+          </label>
+          <Input
+            type="text"
+            name="phone_number"
+            id="phoneNumber"
+            defaultValue={props.formValues.phone_number}
+          />
+        </div>
+        <div className=" py-3">
+          <p className="small font-italic">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.text-messaging.disclaimer'])}
+          </p>
+        </div>
+        <ErrorMessage message={props.formErrors.coaching} />
+        <div className="d-flex flex-column align-items-center">
+          <Button variant="outline-primary" className="w-100" type="submit">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.accept-coaching'])}
+          </Button>
+        </div>
+        <div className="mt-3">
+          <Hyperlink
+            className="mt-3 text-dark btn-link small"
+            destination={props.redirectUrl}
+            onClick={props.declineCoaching}
+          >
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.decline-coaching'])}
+          </Hyperlink>
+        </div>
+      </form>
    </div>
-  );
-}
+  </div>
+);

 CoachingForm.defaultProps = {
  formErrors: {
--- a/src/account-settings/coaching/CoachingToggle.jsx
+++ b/src/account-settings/coaching/CoachingToggle.jsx
@@ -8,69 +8,67 @@ import { editableFieldSelector } from '../data/selectors';
 import { saveSettings, updateDraft, saveMultipleSettings } from '../data/actions';
 import EditableField from '../EditableField';

-function CoachingToggle(props) {
-  return (
-    <>
-      <EditableField
-        name="phone_number"
-        type="text"
-        value={props.phone_number}
-        label={props.intl.formatMessage(messages['account.settings.field.phone_number'])}
-        emptyLabel={props.intl.formatMessage(messages['account.settings.field.phone_number.empty'])}
-        onChange={props.updateDraft}
-        onSubmit={() => {
-          const { coaching } = props;
-          if (coaching.coaching_consent === true) {
-            return props.saveMultipleSettings([
-              {
-                formId: 'coaching',
-                commitValues: {
-                  ...coaching,
-                  phone_number: props.phone_number,
-                },
+const CoachingToggle = (props) => (
+  <>
+    <EditableField
+      name="phone_number"
+      type="text"
+      value={props.phone_number}
+      label={props.intl.formatMessage(messages['account.settings.field.phone_number'])}
+      emptyLabel={props.intl.formatMessage(messages['account.settings.field.phone_number.empty'])}
+      onChange={props.updateDraft}
+      onSubmit={() => {
+        const { coaching } = props;
+        if (coaching.coaching_consent === true) {
+          return props.saveMultipleSettings([
+            {
+              formId: 'coaching',
+              commitValues: {
+                ...coaching,
+                phone_number: props.phone_number,
              },
-              {
-                formId: 'phone_number',
-                commitValues: props.phone_number,
-              },
-            ], 'phone_number');
-          }
-          return props.saveSettings('phone_number', props.phone_number);
+            },
+            {
+              formId: 'phone_number',
+              commitValues: props.phone_number,
+            },
+          ], 'phone_number');
+        }
+        return props.saveSettings('phone_number', props.phone_number);
+      }}
+    />
+    <ValidationFormGroup
+      for="coachingConsent"
+      helpText={props.intl.formatMessage(messages['account.settings.field.coaching_consent.tooltip'])}
+      invalid={!!props.error}
+      invalidMessage={props.intl.formatMessage(messages['account.settings.field.coaching_consent.error'])}
+      className="custom-control custom-switch"
+    >
+      <Input
+        name={props.name}
+        className="custom-control-input"
+        disabled={props.saveState === 'pending'}
+        type="checkbox"
+        id="coachingConsent"
+        checked={props.coaching.coaching_consent}
+        value={props.coaching.coaching_consent}
+        onChange={async (e) => {
+          const { name } = e.target;
+          // eslint-disable-next-line camelcase
+          const { user, eligible_for_coaching } = props.coaching;
+          const value = {
+            user,
+            // eslint-disable-next-line camelcase
+            eligible_for_coaching,
+            coaching_consent: e.target.checked,
+          };
+          props.saveSettings(name, value);
        }}
      />
-      <ValidationFormGroup
-        for="coachingConsent"
-        helpText={props.intl.formatMessage(messages['account.settings.field.coaching_consent.tooltip'])}
-        invalid={!!props.error}
-        invalidMessage={props.intl.formatMessage(messages['account.settings.field.coaching_consent.error'])}
-        className="custom-control custom-switch"
-      >
-        <Input
-          name={props.name}
-          className="custom-control-input"
-          disabled={props.saveState === 'pending'}
-          type="checkbox"
-          id="coachingConsent"
-          checked={props.coaching.coaching_consent}
-          value={props.coaching.coaching_consent}
-          onChange={async (e) => {
-            const { name } = e.target;
-            // eslint-disable-next-line camelcase
-            const { user, eligible_for_coaching } = props.coaching;
-            const value = {
-              user,
-              // eslint-disable-next-line camelcase
-              eligible_for_coaching,
-              coaching_consent: e.target.checked,
-            };
-            props.saveSettings(name, value);
-          }}
-        />
-        <label className="custom-control-label" htmlFor="coachingConsent">{props.intl.formatMessage(messages['account.settings.field.coaching_consent'])}</label>
-      </ValidationFormGroup>
-    </>
-  );
-}
+      <label className="custom-control-label" htmlFor="coachingConsent">{props.intl.formatMessage(messages['account.settings.field.coaching_consent'])}</label>
+    </ValidationFormGroup>
+  </>
+);

 CoachingToggle.defaultProps = {
  phone_number: '',
--- a/src/account-settings/delete-account/BeforeProceedingBanner.jsx
+++ b/src/account-settings/delete-account/BeforeProceedingBanner.jsx
@@ -12,7 +12,7 @@ import messages from './messages';
 // Components
 import Alert from '../Alert';

-function BeforeProceedingBanner(props) {
+const BeforeProceedingBanner = (props) => {
  const { instructionMessageId, intl, supportArticleUrl } = props;

  return (
@@ -35,7 +35,7 @@ function BeforeProceedingBanner(props) {
      />
    </Alert>
  );
-}
+};

 BeforeProceedingBanner.propTypes = {
  instructionMessageId: PropTypes.string.isRequired,
--- a/src/account-settings/delete-account/PrintingInstructions.jsx
+++ b/src/account-settings/delete-account/PrintingInstructions.jsx
@@ -5,7 +5,7 @@ import { Hyperlink } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';

-function PrintingInstructions(props) {
+const PrintingInstructions = (props) => {
  const actionLink = (
    <Hyperlink
      // TODO: What would a generic version of this link look like?  Should
@@ -38,7 +38,7 @@ function PrintingInstructions(props) {
      values={{ actionLink }}
    />
  );
-}
+};

 PrintingInstructions.propTypes = {
  intl: intlShape.isRequired,
--- a/src/account-settings/delete-account/SuccessModal.jsx
+++ b/src/account-settings/delete-account/SuccessModal.jsx
@@ -5,7 +5,7 @@ import { Modal } from '@edx/paragon';

 import messages from './messages';

-export function SuccessModal(props) {
+export const SuccessModal = (props) => {
  const { status, intl, onClose } = props;
  return (
    <Modal
@@ -23,7 +23,7 @@ export function SuccessModal(props) {
      onClose={onClose}
    />
  );
-}
+};

 SuccessModal.propTypes = {
  status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),
--- a/src/account-settings/demographics/Checkboxes.jsx
+++ b/src/account-settings/demographics/Checkboxes.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { CheckBox } from '@edx/paragon';
 import { DECLINED } from '../data/constants';

-function Checkboxes(props) {
+const Checkboxes = (props) => {
  const {
    id,
    options,
@@ -59,7 +59,7 @@ function Checkboxes(props) {
      {renderCheckboxes()}
    </div>
  );
-}
+};

 Checkboxes.propTypes = {
  id: PropTypes.string.isRequired,
--- a/src/account-settings/name-change/NameChange.jsx
+++ b/src/account-settings/name-change/NameChange.jsx
@@ -21,13 +21,13 @@ import { nameChangeSelector } from '../data/selectors';
 import { requestNameChange, requestNameChangeFailure, requestNameChangeReset } from './data/actions';
 import messages from './messages';

-function NameChangeModal({
+const NameChangeModal = ({
  targetFormId,
  errors,
  formValues,
  intl,
  saveState,
-}) {
+}) => {
  const dispatch = useDispatch();
  const { push } = useHistory();
  const { username } = getAuthenticatedUser();
@@ -183,7 +183,7 @@ function NameChangeModal({

    </ModalDialog>
  );
-}
+};

 NameChangeModal.propTypes = {
  targetFormId: PropTypes.string.isRequired,
--- a/src/account-settings/reset-password/ConfirmationAlert.jsx
+++ b/src/account-settings/reset-password/ConfirmationAlert.jsx
@@ -7,7 +7,7 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';

 import Alert from '../Alert';

-function ConfirmationAlert(props) {
+const ConfirmationAlert = (props) => {
  const { email } = props;

  const technicalSupportLink = (
@@ -38,7 +38,7 @@ function ConfirmationAlert(props) {
      />
    </Alert>
  );
-}
+};

 ConfirmationAlert.propTypes = {
  email: PropTypes.string.isRequired,
--- a/src/account-settings/reset-password/RequestInProgressAlert.jsx
+++ b/src/account-settings/reset-password/RequestInProgressAlert.jsx
@@ -5,19 +5,17 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';

 import Alert from '../Alert';

-function RequestInProgressAlert() {
-  return (
-    <Alert
-      className="alert-warning mt-n2"
-      icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
-    >
-      <FormattedMessage
-        id="account.settings.editable.field.password.reset.button.forbidden"
-        defaultMessage="Your previous request is in progress, please try again in few moments."
-        description="A message displayed when a previous password reset request is still in progress."
-      />
-    </Alert>
-  );
-}
+const RequestInProgressAlert = () => (
+  <Alert
+    className="alert-warning mt-n2"
+    icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
+  >
+    <FormattedMessage
+      id="account.settings.editable.field.password.reset.button.forbidden"
+      defaultMessage="Your previous request is in progress, please try again in few moments."
+      description="A message displayed when a previous password reset request is still in progress."
+    />
+  </Alert>
+);

 export default RequestInProgressAlert;
--- a/src/account-settings/reset-password/ResetPassword.jsx
+++ b/src/account-settings/reset-password/ResetPassword.jsx
@@ -9,7 +9,7 @@ import messages from './messages';
 import ConfirmationAlert from './ConfirmationAlert';
 import RequestInProgressAlert from './RequestInProgressAlert';

-function ResetPassword(props) {
+const ResetPassword = (props) => {
  const { email, intl, status } = props;
  return (
    <div className="form-group">
@@ -47,7 +47,7 @@ function ResetPassword(props) {
      {status === 'forbidden' ? <RequestInProgressAlert /> : null}
    </div>
  );
-}
+};

 ResetPassword.propTypes = {
  email: PropTypes.string,
--- a/src/head/Head.jsx
+++ b/src/head/Head.jsx
@@ -5,16 +5,14 @@ import { getConfig } from '@edx/frontend-platform';

 import messages from './messages';

-function Head({ intl }) {
-  return (
-    <Helmet>
-      <title>
-        {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
-      </title>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-  );
-}
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);

 Head.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/AccessBlocked.jsx
+++ b/src/id-verification/AccessBlocked.jsx
@@ -6,7 +6,7 @@ import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/
 import messages from './IdVerification.messages';
 import { ERROR_REASONS } from './IdVerificationContext';

-function AccessBlocked({ error, intl }) {
+const AccessBlocked = ({ error, intl }) => {
  const handleMessage = () => {
    if (error === ERROR_REASONS.COURSE_ENROLLMENT) {
      return <p>{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}</p>;
@@ -39,7 +39,7 @@ function AccessBlocked({ error, intl }) {
      </div>
    </div>
  );
-}
+};

 AccessBlocked.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/CameraHelp.jsx
+++ b/src/id-verification/CameraHelp.jsx
@@ -6,35 +6,33 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import messages from './IdVerification.messages';

-function CameraHelp(props) {
-  return (
-    <div>
-      <Collapsible
-        styling="card"
-        title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
-        className="mb-4 shadow"
-        defaultOpen={props.isOpen}
-      >
-        <p>
-          {props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
-        </p>
-      </Collapsible>
-      <Collapsible
-        styling="card"
-        title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
-        className="mb-4 shadow"
-        defaultOpen={props.isOpen}
-      >
-        <p>
-          {props.intl.formatMessage(
-            messages['id.verification.camera.help.difficulty.answer'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-      </Collapsible>
-    </div>
-  );
-}
+const CameraHelp = (props) => (
+  <div>
+    <Collapsible
+      styling="card"
+      title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
+      className="mb-4 shadow"
+      defaultOpen={props.isOpen}
+    >
+      <p>
+        {props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
+      </p>
+    </Collapsible>
+    <Collapsible
+      styling="card"
+      title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
+      className="mb-4 shadow"
+      defaultOpen={props.isOpen}
+    >
+      <p>
+        {props.intl.formatMessage(
+          messages['id.verification.camera.help.difficulty.answer'],
+          { siteName: getConfig().SITE_NAME },
+        )}
+      </p>
+    </Collapsible>
+  </div>
+);

 CameraHelp.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/CameraHelpWithUpload.jsx
+++ b/src/id-verification/CameraHelpWithUpload.jsx
@@ -10,7 +10,7 @@ import IdVerificationContext from './IdVerificationContext';
 import ImagePreview from './ImagePreview';
 import SupportedMediaTypes from './SupportedMediaTypes';

-function CameraHelpWithUpload(props) {
+const CameraHelpWithUpload = (props) => {
  const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
  const [hasUploadedImage, setHasUploadedImage] = useState(false);

@@ -41,7 +41,7 @@ function CameraHelpWithUpload(props) {
      </Collapsible>
    </div>
  );
-}
+};

 CameraHelpWithUpload.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/CollapsibleImageHelp.jsx
+++ b/src/id-verification/CollapsibleImageHelp.jsx
@@ -6,7 +6,7 @@ import { Button, Collapsible } from '@edx/paragon';
 import IdVerificationContext from './IdVerificationContext';
 import messages from './IdVerification.messages';

-function CollapsibleImageHelp(props) {
+const CollapsibleImageHelp = (props) => {
  const {
    userId, useCameraForId, setUseCameraForId,
  } = useContext(IdVerificationContext);
@@ -47,7 +47,7 @@ function CollapsibleImageHelp(props) {
      </Button>
    </Collapsible>
  );
-}
+};

 CollapsibleImageHelp.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/IdVerificationContextProvider.jsx
+++ b/src/id-verification/IdVerificationContextProvider.jsx
@@ -15,7 +15,7 @@ import { hasGetUserMediaSupport } from './getUserMediaShim';
 import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
 import { VerifiedNameContext } from './VerifiedNameContext';

-export default function IdVerificationContextProvider({ children }) {
+const IdVerificationContextProvider = ({ children }) => {
  const { authenticatedUser } = useContext(AppContext);
  const { verifiedNameHistoryCallStatus, verifiedName } = useContext(VerifiedNameContext);

@@ -129,8 +129,10 @@ export default function IdVerificationContextProvider({ children }) {
      {children}
    </IdVerificationContext.Provider>
  );
-}
+};

 IdVerificationContextProvider.propTypes = {
  children: PropTypes.node.isRequired,
 };
+
+export default IdVerificationContextProvider;
--- a/src/id-verification/IdVerificationPage.jsx
+++ b/src/id-verification/IdVerificationPage.jsx
@@ -26,7 +26,7 @@ import SubmittedPanel from './panels/SubmittedPanel';
 import messages from './IdVerification.messages';

 // eslint-disable-next-line react/prefer-stateless-function
-function IdVerificationPage(props) {
+const IdVerificationPage = (props) => {
  const { path } = useRouteMatch();
  const { search } = useLocation();

@@ -106,7 +106,7 @@ function IdVerificationPage(props) {
      </div>
    </>
  );
-}
+};

 IdVerificationPage.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/ImageFileUpload.jsx
+++ b/src/id-verification/ImageFileUpload.jsx
@@ -5,7 +5,7 @@ import { Alert } from '@edx/paragon';
 import messages from './IdVerification.messages';
 import SupportedMediaTypes from './SupportedMediaTypes';

-export default function ImageFileUpload({ onFileChange, intl }) {
+const ImageFileUpload = ({ onFileChange, intl }) => {
  const [error, setError] = useState(null);
  const errorTypes = {
    invalidFileType: 'invalidFileType',
@@ -54,9 +54,11 @@ export default function ImageFileUpload({ onFileChange, intl }) {
      )}
    </>
  );
-}
+};

 ImageFileUpload.propTypes = {
  onFileChange: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
 };
+
+export default ImageFileUpload;
--- a/src/id-verification/ImagePreview.jsx
+++ b/src/id-verification/ImagePreview.jsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-export default function ImagePreview({ src, alt, id }) {
-  return (
-    <div id={id} className="image-preview">
+const ImagePreview = ({ src, alt, id }) => (
+  <div id={id} className="image-preview">

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

-    </div>
-  );
-}
+  </div>
+);

 ImagePreview.propTypes = {
  src: PropTypes.string.isRequired,
@@ -20,3 +18,5 @@ ImagePreview.propTypes = {
 ImagePreview.defaultProps = {
  id: undefined,
 };
+
+export default ImagePreview;
--- a/src/id-verification/SupportedMediaTypes.jsx
+++ b/src/id-verification/SupportedMediaTypes.jsx
@@ -1,6 +1,6 @@
 import React from 'react';

-export default function SupportedMediaTypes() {
+const SupportedMediaTypes = () => {
  const SUPPORTED_TYPES = ['.png', '.jpeg', '.jpg', '.bmp', '.webp', '.tiff'];

  const getSupportedTypes = () => SUPPORTED_TYPES.map((type, index) => {
@@ -11,4 +11,6 @@ export default function SupportedMediaTypes() {
  });

  return <span>{getSupportedTypes()}</span>;
-}
+};
+
+export default SupportedMediaTypes;
--- a/src/id-verification/VerifiedNameContext.jsx
+++ b/src/id-verification/VerifiedNameContext.jsx
@@ -8,7 +8,7 @@ import { SUCCESS_STATUS } from '../constants';

 export const VerifiedNameContext = createContext();

-export function VerifiedNameContextProvider({ children }) {
+export const VerifiedNameContextProvider = ({ children }) => {
  const verifiedNameHistoryData = useAsyncCall(getVerifiedNameHistory);

  let verifiedName = '';
@@ -24,7 +24,7 @@ export function VerifiedNameContextProvider({ children }) {
  }), [status, verifiedName]);

  return (<VerifiedNameContext.Provider value={value}>{children}</VerifiedNameContext.Provider>);
-}
+};

 VerifiedNameContextProvider.propTypes = {
  children: PropTypes.node.isRequired,
--- a/src/id-verification/panels/BasePanel.jsx
+++ b/src/id-verification/panels/BasePanel.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { Redirect } from 'react-router';
 import { useVerificationRedirectSlug } from '../routing-utilities';

-export default function BasePanel({
+const BasePanel = ({
  children,
  focusOnMount,
  name,
  title,
-}) {
+}) => {
  const headingRef = useRef();

  // focus heading element on mount
@@ -29,7 +29,7 @@ export default function BasePanel({
      {children}
    </div>
  );
-}
+};

 BasePanel.propTypes = {
  children: PropTypes.node.isRequired,
@@ -41,3 +41,5 @@ BasePanel.propTypes = {
 BasePanel.defaultProps = {
  focusOnMount: true,
 };
+
+export default BasePanel;
--- a/src/id-verification/panels/EnableCameraDirectionsPanel.jsx
+++ b/src/id-verification/panels/EnableCameraDirectionsPanel.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from '../IdVerification.messages';

-export function EnableCameraDirectionsPanel(props) {
+export const EnableCameraDirectionsPanel = (props) => {
  if (props.browserName === 'Internet Explorer') {
    return (
      <>
@@ -65,7 +65,7 @@ export function EnableCameraDirectionsPanel(props) {
  }
  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <></>;
-}
+};

 EnableCameraDirectionsPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/GetNameIdPanel.jsx
+++ b/src/id-verification/panels/GetNameIdPanel.jsx
@@ -11,7 +11,7 @@ import IdVerificationContext from '../IdVerificationContext';

 import messages from '../IdVerification.messages';

-function GetNameIdPanel(props) {
+const GetNameIdPanel = (props) => {
  const { push, location } = useHistory();
  const nameInputRef = useRef();
  const panelSlug = 'get-name-id';
@@ -89,7 +89,7 @@ function GetNameIdPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 GetNameIdPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/IdContextPanel.jsx
+++ b/src/id-verification/panels/IdContextPanel.jsx
@@ -8,7 +8,7 @@ import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';
 import exampleCard from '../assets/example-card.png';

-function IdContextPanel(props) {
+const IdContextPanel = (props) => {
  const panelSlug = 'id-context';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  return (
@@ -47,7 +47,7 @@ function IdContextPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 IdContextPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/PortraitPhotoContextPanel.jsx
+++ b/src/id-verification/panels/PortraitPhotoContextPanel.jsx
@@ -7,7 +7,7 @@ import BasePanel from './BasePanel';
 import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';

-function PortraitPhotoContextPanel(props) {
+const PortraitPhotoContextPanel = (props) => {
  const panelSlug = 'portrait-photo-context';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  return (
@@ -44,7 +44,7 @@ function PortraitPhotoContextPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 PortraitPhotoContextPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/RequestCameraAccessPanel.jsx
+++ b/src/id-verification/panels/RequestCameraAccessPanel.jsx
@@ -14,7 +14,7 @@ import { UnsupportedCameraDirectionsPanel } from './UnsupportedCameraDirectionsP

 import messages from '../IdVerification.messages';

-function RequestCameraAccessPanel(props) {
+const RequestCameraAccessPanel = (props) => {
  const { location: returnUrl, text: returnText } = useRedirect();
  const panelSlug = 'request-camera-access';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
@@ -118,7 +118,7 @@ function RequestCameraAccessPanel(props) {

    </BasePanel>
  );
-}
+};

 RequestCameraAccessPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/ReviewRequirementsPanel.jsx
+++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx
@@ -12,7 +12,7 @@ import IdVerificationContext from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 import exampleCard from '../assets/example-card.png';

-function ReviewRequirementsPanel(props) {
+const ReviewRequirementsPanel = (props) => {
  const { userId, profileDataManager } = useContext(IdVerificationContext);
  const panelSlug = 'review-requirements';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
@@ -124,7 +124,7 @@ function ReviewRequirementsPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 ReviewRequirementsPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -10,7 +10,7 @@ import messages from '../IdVerification.messages';

 import BasePanel from './BasePanel';

-function SubmittedPanel(props) {
+const SubmittedPanel = (props) => {
  const { userId } = useContext(IdVerificationContext);
  const { location: returnUrl, text: returnText } = useRedirect();
  const panelSlug = 'submitted';
@@ -39,7 +39,7 @@ function SubmittedPanel(props) {
      </a>
    </BasePanel>
  );
-}
+};

 SubmittedPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -16,7 +16,7 @@ import messages from '../IdVerification.messages';
 import CameraHelpWithUpload from '../CameraHelpWithUpload';
 import SupportedMediaTypes from '../SupportedMediaTypes';

-function SummaryPanel(props) {
+const SummaryPanel = (props) => {
  const panelSlug = 'summary';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const {
@@ -60,7 +60,7 @@ function SummaryPanel(props) {
  }

  // eslint-disable-next-line react/no-unstable-nested-components
-  function SubmitButton() {
+  const SubmitButton = () => {
    const handleClick = async () => {
      setIsSubmitting(true);
      const verificationData = {
@@ -97,7 +97,7 @@ function SummaryPanel(props) {
        {props.intl.formatMessage(messages['id.verification.review.confirm'])}
      </Button>
    );
-  }
+  };

  function getError() {
    if (submissionError.status === 400) {
@@ -240,7 +240,7 @@ function SummaryPanel(props) {
      {isSubmitting && <Spinner animation="border" variant="primary" />}
    </BasePanel>
  );
-}
+};

 SummaryPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/TakeIdPhotoPanel.jsx
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -14,7 +14,7 @@ import ImageFileUpload from '../ImageFileUpload';
 import CollapsibleImageHelp from '../CollapsibleImageHelp';
 import SupportedMediaTypes from '../SupportedMediaTypes';

-function TakeIdPhotoPanel(props) {
+const TakeIdPhotoPanel = (props) => {
  const panelSlug = 'take-id-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
@@ -67,7 +67,7 @@ function TakeIdPhotoPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 TakeIdPhotoPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -10,7 +10,7 @@ import IdVerificationContext from '../IdVerificationContext';

 import messages from '../IdVerification.messages';

-function TakePortraitPhotoPanel(props) {
+const TakePortraitPhotoPanel = (props) => {
  const panelSlug = 'take-portrait-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
@@ -41,7 +41,7 @@ function TakePortraitPhotoPanel(props) {
      </div>
    </BasePanel>
  );
-}
+};

 TakePortraitPhotoPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/panels/UnsupportedCameraDirectionsPanel.jsx
+++ b/src/id-verification/panels/UnsupportedCameraDirectionsPanel.jsx
@@ -3,15 +3,13 @@ import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from '../IdVerification.messages';

-export function UnsupportedCameraDirectionsPanel(props) {
-  return (
-    <>
-      {props.browserName === 'Chrome' && <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
-      <span> </span>
-      <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
-    </>
-  );
-}
+export const UnsupportedCameraDirectionsPanel = (props) => (
+  <>
+    {props.browserName === 'Chrome' && <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
+    <span> </span>
+    <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
+  </>
+);

 UnsupportedCameraDirectionsPanel.propTypes = {
  intl: intlShape.isRequired,
--- a/src/id-verification/tests/VerifiedNameContextProvider.test.jsx
+++ b/src/id-verification/tests/VerifiedNameContextProvider.test.jsx
@@ -5,14 +5,14 @@ import { render, cleanup, waitFor } from '@testing-library/react';
 import { getVerifiedNameHistory } from '../../account-settings/data/service';
 import { VerifiedNameContext, VerifiedNameContextProvider } from '../VerifiedNameContext';

-function VerifiedNameContextTestComponent() {
+const VerifiedNameContextTestComponent = () => {
  const { verifiedName } = useContext(VerifiedNameContext);
  return (
    <>
      {verifiedName && (<div data-testid="verified-name">{verifiedName}</div>)}
    </>
  );
-}
+};

 jest.mock('../../account-settings/data/service', () => ({
  getVerifiedNameHistory: jest.fn(() => ({})),
--- a/src/tests/hooks.test.jsx
+++ b/src/tests/hooks.test.jsx
@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react';
 import { useAsyncCall } from '../hooks';
 import { LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS } from '../constants';

-function TestUseAsyncCallHookComponent({ asyncFunc }) {
+const TestUseAsyncCallHookComponent = ({ asyncFunc }) => {
  const { status, data } = useAsyncCall(asyncFunc);
  return (
    <>
@@ -12,7 +12,7 @@ function TestUseAsyncCallHookComponent({ asyncFunc }) {
      {data && Object.keys(data).length !== 0 && <div data-testid="data">{ data.data }</div>}
    </>
  );
-}
+};

 TestUseAsyncCallHookComponent.propTypes = {
  asyncFunc: PropTypes.func.isRequired,
Author	SHA1	Message	Date
Bilal Qamar	ff5281408b	fix: updated package-lock to resolve dependency tree issue	2022-10-26 16:13:58 +05:00
renovate[bot]	e880c3b59c	fix(deps): update react monorepo to v18	2022-10-24 14:31:23 +00:00
Muhammad Abdullah Waheed	e9f6acff27	Merge pull request #673 from openedx/abdullahwaheed/eslint-issues-fix fix: migrated functions to arrow functions to fix linting	2022-10-24 18:02:37 +05:00
Abdullah Waheed	dc26da9cc1	fix: migrated functions to arrow functions to fix linting	2022-10-24 15:53:58 +05:00
renovate[bot]	9dd05761fd	chore(deps): update dependency @edx/frontend-build to v12.3.0	2022-10-24 08:26:58 +00:00
renovate[bot]	0d5b86df57	fix(deps): update dependency regenerator-runtime to v0.13.10	2022-10-17 08:57:06 +00:00
renovate[bot]	d8eb6e9da5	fix(deps): update dependency react-redux to v7.2.9	2022-10-17 08:49:23 +00:00