Merge pull request #885 from openedx/PluginPOC/addTag

feat: add little tag to identify POC
fix: update snapshot
2023-10-19 12:08:44 -04:00 · 2023-10-19 15:58:39 +00:00 · 2023-10-19 15:34:04 +00:00 · 2023-10-18 11:58:21 -07:00 · 2023-10-18 11:43:43 -07:00
28 changed files with 1187 additions and 604 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,9 @@
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-        "@edx/frontend-component-footer": "12.3.0",
+        "@edx/frontend-component-footer": "12.4.0",
        "@edx/frontend-component-header": "4.7.1",
-        "@edx/frontend-platform": "5.5.4",
+        "@edx/frontend-platform": "5.6.1",
        "@edx/paragon": "^20.44.0",
        "@fortawesome/fontawesome-svg-core": "1.2.36",
        "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -21,7 +21,7 @@
        "@fortawesome/react-fontawesome": "0.2.0",
        "@pact-foundation/pact": "^11.0.2",
        "classnames": "2.3.2",
-        "core-js": "3.32.2",
+        "core-js": "3.33.0",
        "history": "5.3.0",
        "lodash.camelcase": "4.3.0",
        "lodash.get": "4.4.2",
@@ -30,6 +30,7 @@
        "prop-types": "15.8.1",
        "react": "17.0.2",
        "react-dom": "17.0.2",
+        "react-error-boundary": "^4.0.11",
        "react-helmet": "6.1.0",
        "react-redux": "7.2.9",
        "react-router": "6.16.0",
@@ -44,8 +45,8 @@
        "universal-cookie": "4.0.4"
      },
      "devDependencies": {
-        "@commitlint/cli": "17.7.2",
-        "@commitlint/config-angular": "17.7.0",
+        "@commitlint/cli": "17.8.0",
+        "@commitlint/config-angular": "17.8.0",
        "@edx/browserslist-config": "^1.1.1",
        "@edx/frontend-build": "12.9.17",
        "@edx/reactifex": "2.2.0",
@@ -127,16 +128,81 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
      "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@babel/compat-data": {
      "version": "7.22.5",
      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
@@ -208,11 +274,11 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
-      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
      "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.23.0",
        "@jridgewell/gen-mapping": "^0.3.2",
        "@jridgewell/trace-mapping": "^0.3.17",
        "jsesc": "^2.5.1"
@@ -348,20 +414,20 @@
      }
    },
    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
      "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -493,9 +559,9 @@
      }
    },
    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
-      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
      "dependencies": {
        "@babel/types": "^7.22.5"
      },
@@ -512,9 +578,9 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
      "engines": {
        "node": ">=6.9.0"
      }
@@ -555,12 +621,12 @@
      }
    },
    "node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
-      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
        "js-tokens": "^4.0.0"
      },
      "engines": {
@@ -632,9 +698,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
-      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -1978,31 +2044,31 @@
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
    "node_modules/@babel/template": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
-      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -2011,12 +2077,12 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
-      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
      "dependencies": {
        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
        "to-fast-properties": "^2.0.0"
      },
      "engines": {
@@ -2044,14 +2110,14 @@
      }
    },
    "node_modules/@commitlint/cli": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.7.2.tgz",
-      "integrity": "sha512-t3N7TZq7lOeqTOyEgfGcaltHqEJf7YDlPg75MldeVPPyz14jZq/+mbGF9tueDLFX8R6RwdymrN6D+U5XwZ8Iwg==",
+      "version": "17.8.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.8.0.tgz",
+      "integrity": "sha512-D3LdyZYbiRyAChfJMNlAd9f2P9vNQ7GWbI9gN2o7L5hF07QJDqj4z/pcJF3PjDbJWOaUUXla287RdDmmKqH2WQ==",
      "dev": true,
      "dependencies": {
        "@commitlint/format": "^17.4.4",
-        "@commitlint/lint": "^17.7.0",
-        "@commitlint/load": "^17.7.2",
+        "@commitlint/lint": "^17.8.0",
+        "@commitlint/load": "^17.8.0",
        "@commitlint/read": "^17.5.1",
        "@commitlint/types": "^17.4.4",
        "execa": "^5.0.0",
@@ -2068,9 +2134,9 @@
      }
    },
    "node_modules/@commitlint/config-angular": {
-      "version": "17.7.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/config-angular/-/config-angular-17.7.0.tgz",
-      "integrity": "sha512-ZWLgVw4se/vmNHfWiti3OIx295KgyCgZ5LjDeLFbHQe9WXMX3lhwnaeJkum4smsQhQaa3/JvufKzxV/3LDGMJA==",
+      "version": "17.8.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-angular/-/config-angular-17.8.0.tgz",
+      "integrity": "sha512-3Jygi+j6AqbVbzZujQZqQhk1WPF4ipeh8MHcXlHa1humQQ2ROqfWUqdFlAxn9iIE93lbJz/ANGthJ9+k9sG7Zg==",
      "dev": true,
      "dependencies": {
        "@commitlint/config-angular-type-enum": "^17.4.0"
@@ -2141,9 +2207,9 @@
      }
    },
    "node_modules/@commitlint/is-ignored": {
-      "version": "17.7.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-17.7.0.tgz",
-      "integrity": "sha512-043rA7m45tyEfW7Zv2vZHF++176MLHH9h70fnPoYlB1slKBeKl8BwNIlnPg4xBdRBVNPaCqvXxWswx2GR4c9Hw==",
+      "version": "17.8.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-17.8.0.tgz",
+      "integrity": "sha512-8bR6rxNcWaNprPBdE4ePIOwbxutTQGOsRPYWssX+zjGxnEljzaZSGzFUOMxapYILlf8Tts/O1wPQgG549Rdvdg==",
      "dev": true,
      "dependencies": {
        "@commitlint/types": "^17.4.4",
@@ -2154,12 +2220,12 @@
      }
    },
    "node_modules/@commitlint/lint": {
-      "version": "17.7.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-17.7.0.tgz",
-      "integrity": "sha512-TCQihm7/uszA5z1Ux1vw+Nf3yHTgicus/+9HiUQk+kRSQawByxZNESeQoX9ujfVd3r4Sa+3fn0JQAguG4xvvbA==",
+      "version": "17.8.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-17.8.0.tgz",
+      "integrity": "sha512-4ihwnqOY4TcJN6iz5Jv1LeYavvBllONwFyGxOIWmCT5s4PNMb43cws2TUdbXTZL1Vq59etGKd5LWYDFPVbs5EA==",
      "dev": true,
      "dependencies": {
-        "@commitlint/is-ignored": "^17.7.0",
+        "@commitlint/is-ignored": "^17.8.0",
        "@commitlint/parse": "^17.7.0",
        "@commitlint/rules": "^17.7.0",
        "@commitlint/types": "^17.4.4"
@@ -2169,9 +2235,9 @@
      }
    },
    "node_modules/@commitlint/load": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-17.7.2.tgz",
-      "integrity": "sha512-XA7WTnsjHZ4YH6ZYsrnxgLdXzriwMMq+utZUET6spbOEEIPBCDLdOQXS26P+v3TTO4hUHOEhzUquaBv3jbBixw==",
+      "version": "17.8.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-17.8.0.tgz",
+      "integrity": "sha512-9VnGXYJCP4tXmR4YrwP8n5oX6T5ZsHfPQq6WuUQOvAI+QsDQMaTGgTRXr7us+xsjz+b+mMBSagogqfUx2aixyw==",
      "dev": true,
      "dependencies": {
        "@commitlint/config-validator": "^17.6.7",
@@ -2514,9 +2580,9 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "12.3.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.3.0.tgz",
-      "integrity": "sha512-ivCtioyP4SceYM4/ugVtif4c41Y+epA0NM7sSB/x6s9A/RTQXb2TY3fDc9lB3ah/0+pRwGVJJEVYkPAZ4JdC/g==",
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.4.0.tgz",
+      "integrity": "sha512-DmAC8eTB4ARYlzBewzxWB3Afn9v8j9nSudqDd6LiXHUYDZ8Z7QPrMfmrmfDHllflVd22NvljmP2hp+WdtjkgMA==",
      "dependencies": {
        "@edx/paragon": "^21.3.1",
        "@fortawesome/fontawesome-svg-core": "6.4.2",
@@ -2534,9 +2600,9 @@
      }
    },
    "node_modules/@edx/frontend-component-footer/node_modules/@edx/paragon": {
-      "version": "21.3.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.3.1.tgz",
-      "integrity": "sha512-bXTUaOEmT8XLnDQzYS8QLMvWK5K2BN4jHlx25lO8N0XWRQeDiQTdbx8OrEbv8QOPTlrv0an5MZc+qjlleJFObg==",
+      "version": "21.5.3",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.5.3.tgz",
+      "integrity": "sha512-Xyq7gWLb4n8qWMsNBIPV3tZnOK0bBdHyqj8UVOrFbpBCSPlOES06qpcpT4IrtpfCh0LmUCBiIk5j9XMz3p6zaw==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",
@@ -2855,9 +2921,9 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.5.4.tgz",
-      "integrity": "sha512-Yum+oST7XfDwDnDhBnzeR/mjp6O+G0g+5AZtIJ1BdTKQH1z9FObfim/pfoiI9STiYlguVpeWMkzWuca/QMLO/Q==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.6.1.tgz",
+      "integrity": "sha512-7MOIjGGYplVY7yHrSea90EkQ24UxKxRKU9FaihB41yUSL/Vin1txDuIn3059Xr+60QfIKRsym+LogXe9IZ47Dw==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
        "@formatjs/intl-pluralrules": "4.3.3",
@@ -2944,9 +3010,9 @@
      }
    },
    "node_modules/@edx/paragon": {
-      "version": "20.46.2",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.46.2.tgz",
-      "integrity": "sha512-px+KS/BV1CbiMKgfVgUofyjJi4CHUCUOLRukJbT66VPPqWP4Xon5Rns6uohoratPXMg2kNN46v2L8wIwqKQ4Lw==",
+      "version": "20.46.3",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.46.3.tgz",
+      "integrity": "sha512-cHxoxoOREVFbBqW9IRAtlIAQo1lcF9JJXkLoEw1Vam6oetKSa5Mc0SL5kykbV+1iRPP7kS8A0Csf5nRr0oolLQ==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",
@@ -2981,21 +3047,21 @@
      }
    },
    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
      "hasInstallScript": true,
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
      },
      "engines": {
        "node": ">=6"
@@ -5006,11 +5072,11 @@
      }
    },
    "node_modules/@restart/hooks": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
-      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
      "dependencies": {
-        "dequal": "^2.0.2"
+        "dequal": "^2.0.3"
      },
      "peerDependencies": {
        "react": ">=16.8.0"
@@ -5644,9 +5710,9 @@
      }
    },
    "node_modules/@types/react-transition-group": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
-      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
      "dependencies": {
        "@types/react": "*"
      }
@@ -5710,9 +5776,9 @@
      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
    },
    "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
    },
    "node_modules/@types/ws": {
      "version": "8.5.5",
@@ -7279,9 +7345,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001546",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz",
-      "integrity": "sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==",
+      "version": "1.0.30001549",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz",
+      "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==",
      "funding": [
        {
          "type": "opencollective",
@@ -7921,9 +7987,9 @@
      }
    },
    "node_modules/core-js": {
-      "version": "3.32.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.2.tgz",
-      "integrity": "sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==",
+      "version": "3.33.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz",
+      "integrity": "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==",
      "hasInstallScript": true,
      "funding": {
        "type": "opencollective",
@@ -10292,6 +10358,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/finalhandler": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -14563,9 +14637,9 @@
      }
    },
    "node_modules/jquery": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
-      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
      "peer": true
    },
    "node_modules/js-base64": {
@@ -15084,39 +15158,6 @@
        "node": ">= 12"
      }
    },
-    "node_modules/mailto-link/node_modules/filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mailto-link/node_modules/query-string": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
-      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mailto-link/node_modules/split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/make-dir": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -15791,9 +15832,9 @@
      }
    },
    "node_modules/object-code": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.2.4.tgz",
-      "integrity": "sha512-uGq4ETUuWe+GA586NXEriiaozNuff+YNFXlpD8cVrM1GoiuTZpCABP+bZCWDrvQDoCiSTyiWAFHD/HF/iwhb2w=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.0.tgz",
+      "integrity": "sha512-PLplgvzuFhSPBuTX/mtaXEnU3c6g7qKflVVQbV9VWEnV/34iKeAX1jeDNCKq1OgGlsnkA/NjldCzTbHxa7Wj4A=="
    },
    "node_modules/object-copy": {
      "version": "0.1.0",
@@ -17508,6 +17549,23 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -17825,6 +17883,17 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz",
+      "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
    "node_modules/react-error-overlay": {
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -17836,9 +17905,9 @@
      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
    },
    "node_modules/react-focus-lock": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.4.tgz",
-      "integrity": "sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==",
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.5.tgz",
+      "integrity": "sha512-h6vrdgUbsH2HeD5I7I3Cx1PPrmwGuKYICS+kB9m+32X/9xHRrAbxgvaBpG7BFBN9h3tO+C3qX1QAVESmi4CiIA==",
      "dependencies": {
        "@babel/runtime": "^7.0.0",
        "focus-lock": "^0.11.6",
@@ -17858,12 +17927,12 @@
      }
    },
    "node_modules/react-focus-on": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.8.1.tgz",
-      "integrity": "sha512-fQcBx+SZMgXoRL+69r5+ic4bdVgqaCeKeoFPra8yhcSuL/3unWavfdirEFBGgH71K+RiocMTS6DETHcX0SlOZg==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.9.1.tgz",
+      "integrity": "sha512-IYo2j4mgNpZEJNv+/XzZs3S3xhJbR+AFop092h4OMW7sbFpIMVWxp/Z61V/gfpsgOi7VnoSFXP2bfOWWkjjtOw==",
      "dependencies": {
        "aria-hidden": "^1.2.2",
-        "react-focus-lock": "^2.9.2",
+        "react-focus-lock": "^2.9.4",
        "react-remove-scroll": "^2.5.6",
        "react-style-singleton": "^2.2.0",
        "tslib": "^2.3.1",
@@ -20116,6 +20185,14 @@
        "wbuf": "^1.7.3"
      }
    },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -21563,9 +21640,13 @@
      }
    },
    "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
      "bin": {
        "uuid": "dist/bin/uuid"
      }
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.3.0",
+    "@edx/frontend-component-footer": "12.4.0",
    "@edx/frontend-component-header": "4.7.1",
-    "@edx/frontend-platform": "5.5.4",
+    "@edx/frontend-platform": "5.6.1",
    "@edx/paragon": "^20.44.0",
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -40,7 +40,7 @@
    "@fortawesome/react-fontawesome": "0.2.0",
    "@pact-foundation/pact": "^11.0.2",
    "classnames": "2.3.2",
-    "core-js": "3.32.2",
+    "core-js": "3.33.0",
    "history": "5.3.0",
    "lodash.camelcase": "4.3.0",
    "lodash.get": "4.4.2",
@@ -49,6 +49,7 @@
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.11",
    "react-helmet": "6.1.0",
    "react-redux": "7.2.9",
    "react-router": "6.16.0",
@@ -63,8 +64,8 @@
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@commitlint/cli": "17.7.2",
-    "@commitlint/config-angular": "17.7.0",
+    "@commitlint/cli": "17.8.0",
+    "@commitlint/config-angular": "17.8.0",
    "@edx/browserslist-config": "^1.1.1",
    "@edx/frontend-build": "12.9.17",
    "@edx/reactifex": "2.2.0",
--- a/plugins/Plugin.jsx
+++ b/plugins/Plugin.jsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React, {
+  useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent,
+} from './data/hooks';
+import { PLUGIN_RESIZE } from './data/constants';
+
+// see example-plugin-app/src/PluginOne.jsx for example of customizing errorFallback
+function errorFallbackDefault() {
+  return (
+    <div>
+      <h2>
+        Oops! An error occurred. Please refresh the screen to try again.
+      </h2>
+    </div>
+  );
+}
+
+// eslint-disable-next-line react/function-component-definition
+export default function Plugin({
+  children, className, style, ready, errorFallbackProp,
+}) {
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
+
+  const finalStyle = useMemo(() => ({
+    ...dimensions,
+    ...style,
+  }), [dimensions, style]);
+
+  const errorFallback = errorFallbackProp || errorFallbackDefault;
+
+  // Error logging function
+  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+  const logErrorToService = (error, info) => {
+    logError(error, { stack: info.componentStack });
+  };
+
+  useHostEvent(PLUGIN_RESIZE, ({ payload }) => {
+    setDimensions({
+      width: payload.width,
+      height: payload.height,
+    });
+  });
+
+  useEffect(() => {
+    dispatchMountedEvent();
+
+    return () => {
+      dispatchUnmountedEvent();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      dispatchReadyEvent();
+    }
+  }, [ready]);
+
+  return (
+    <div className={className} style={finalStyle}>
+      <ErrorBoundary
+        FallbackComponent={errorFallback}
+        onError={logErrorToService}
+      >
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+Plugin.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  errorFallbackProp: PropTypes.func,
+  ready: PropTypes.bool,
+  style: PropTypes.object, // eslint-disable-line
+};
+
+Plugin.defaultProps = {
+  className: null,
+  errorFallbackProp: null,
+  style: {},
+  ready: true,
+};
--- a/plugins/PluginContainer.jsx
+++ b/plugins/PluginContainer.jsx
@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PluginContainerIframe from './PluginContainerIframe';
+
+import {
+  IFRAME_PLUGIN,
+} from './data/constants';
+import { pluginConfigShape } from './data/shapes';
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainer({ config, ...props }) {
+  if (config === null) {
+    return null;
+  }
+
+  // this will allow for future plugin types to be inserted in the PluginErrorBoundary
+  let renderer = null;
+  switch (config.type) {
+    case IFRAME_PLUGIN:
+      renderer = (
+        <PluginContainerIframe config={config} {...props} />
+      );
+      break;
+    // istanbul ignore next: default isn't meaningful, just satisfying linter
+    default:
+  }
+
+  return (
+    renderer
+  );
+}
+
+PluginContainer.propTypes = {
+  config: pluginConfigShape,
+};
+
+PluginContainer.defaultProps = {
+  config: null,
+};
--- a/plugins/PluginContainerIframe.jsx
+++ b/plugins/PluginContainerIframe.jsx
@@ -0,0 +1,99 @@
+import React, {
+  useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  PLUGIN_MOUNTED,
+  PLUGIN_READY,
+  PLUGIN_RESIZE,
+} from './data/constants';
+import {
+  dispatchPluginEvent,
+  useElementSize,
+  usePluginEvent,
+} from './data/hooks';
+import { pluginConfigShape } from './data/shapes';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainerIframe({
+  config, fallback, className, ...props
+}) {
+  const { url } = config;
+  const { title, scrolling } = props;
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const [iframeRef, iframeElement, width, height] = useElementSize();
+
+  useEffect(() => {
+    if (mounted) {
+      dispatchPluginEvent(iframeElement, {
+        type: PLUGIN_RESIZE,
+        payload: {
+          width,
+          height,
+        },
+      }, url);
+    }
+  }, [iframeElement, mounted, width, height, url]);
+
+  usePluginEvent(iframeElement, PLUGIN_MOUNTED, () => {
+    setMounted(true);
+  });
+
+  usePluginEvent(iframeElement, PLUGIN_READY, () => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={url}
+        allow={IFRAME_FEATURE_POLICY}
+        scrolling={scrolling}
+        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+        className={classNames(
+          'border border-0',
+          { 'd-none': !ready },
+          className,
+        )}
+        {...props}
+      />
+      {!ready && fallback}
+    </>
+  );
+}
+
+PluginContainerIframe.propTypes = {
+  config: pluginConfigShape,
+  fallback: PropTypes.node,
+  scrolling: PropTypes.oneOf(['auto', 'yes', 'no']),
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PluginContainerIframe.defaultProps = {
+  config: null,
+  fallback: null,
+  scrolling: 'auto',
+  title: null,
+  className: null,
+};
--- a/plugins/PluginErrorBoundary.jsx
+++ b/plugins/PluginErrorBoundary.jsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FormattedMessage } from 'react-intl';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+export default class PluginErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <FormattedMessage
+          id="plugin.load.failure.text"
+          defaultMessage="This content failed to load."
+          description="error message when an unexpected error occurs"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+PluginErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+PluginErrorBoundary.defaultProps = {
+  children: null,
+};
--- a/plugins/PluginSlot.jsx
+++ b/plugins/PluginSlot.jsx
@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Spinner } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+// import { usePluginSlot } from './data/hooks';
+import PluginContainer from './PluginContainer';
+
+const PluginSlot = forwardRef(({
+  as, id, intl, pluginProps, children, ...props
+}, ref) => {
+  /* the plugins below are obtained by the id passed into PluginSlot by the Host MFE. See example/src/PluginsPage.jsx
+  for an example of how PluginSlot is populated, and example/src/index.jsx for a dummy JS config that holds all plugins
+  */
+  // const { plugins, keepDefault } = usePluginSlot(id);
+
+  const { fallback } = pluginProps;
+
+  // TODO: Add internationalization to the "Loading" text on the spinner.
+  let finalFallback = (
+    <div className={classNames(pluginProps.className, 'd-flex justify-content-center align-items-center')}>
+      <Spinner animation="border" screenReaderText="Loading" />
+    </div>
+  );
+  if (fallback !== undefined) {
+    finalFallback = fallback;
+  }
+
+  let finalChildren = [];
+  // if (plugins.length > 0) {
+  // if (keepDefault) {
+  //   finalChildren.push(children);
+  // }
+  // plugins.forEach((pluginConfig) => {
+  //   finalChildren.push(
+  //     <PluginContainer
+  //       key={pluginConfig.url}
+  //       config={pluginConfig}
+  //       fallback={finalFallback}
+  //       {...pluginProps}
+  //     />,
+  //   );
+  // });
+  // } else {
+  finalChildren = children;
+  // }
+
+  return React.createElement(
+    as,
+    {
+      ...props,
+      ref,
+    },
+    finalChildren,
+  );
+});
+
+export default injectIntl(PluginSlot);
+
+PluginSlot.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  pluginProps: PropTypes.object, // eslint-disable-line
+};
+
+PluginSlot.defaultProps = {
+  as: 'div',
+  children: null,
+  pluginProps: {},
+};
--- a/plugins/data/constants.js
+++ b/plugins/data/constants.js
@@ -0,0 +1,8 @@
+// TODO: We expect other plugin types to be added here, such as LTI_PLUGIN and BUILD_TIME_PLUGIN.
+export const IFRAME_PLUGIN = 'IFRAME_PLUGIN'; // loads iframe at the URL, rather than loading a JS file.
+
+// Plugin lifecycle events
+export const PLUGIN_MOUNTED = 'PLUGIN_MOUNTED';
+export const PLUGIN_READY = 'PLUGIN_READY';
+export const PLUGIN_UNMOUNTED = 'PLUGIN_UNMOUNTED';
+export const PLUGIN_RESIZE = 'PLUGIN_RESIZE';
--- a/plugins/data/hooks.js
+++ b/plugins/data/hooks.js
@@ -0,0 +1,96 @@
+import {
+  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
+} from 'react';
+import { PLUGIN_MOUNTED, PLUGIN_READY, PLUGIN_UNMOUNTED } from './constants';
+
+export function useMessageEvent(srcWindow, type, callback) {
+  useLayoutEffect(() => {
+    const listener = (event) => {
+      // Filter messages to those from our source window.
+      if (event.source === srcWindow) {
+        if (event.data.type === type) {
+          callback({ type, payload: event.data.payload });
+        }
+      }
+    };
+    if (srcWindow !== null) {
+      global.addEventListener('message', listener);
+    }
+    return () => {
+      global.removeEventListener('message', listener);
+    };
+  }, [srcWindow, type, callback]);
+}
+
+export function useHostEvent(type, callback) {
+  useMessageEvent(global.parent, type, callback);
+}
+
+export function usePluginEvent(iframeElement, type, callback) {
+  const contentWindow = iframeElement ? iframeElement.contentWindow : null;
+  useMessageEvent(contentWindow, type, callback);
+}
+
+export function dispatchMessageEvent(targetWindow, message, targetOrigin) {
+  // Checking targetOrigin falsiness here since '', null or undefined would all be reasons not to
+  // try to post a message to the origin.
+  if (targetOrigin) {
+    targetWindow.postMessage(message, targetOrigin);
+  }
+}
+
+export function dispatchPluginEvent(iframeElement, message, targetOrigin) {
+  dispatchMessageEvent(iframeElement.contentWindow, message, targetOrigin);
+}
+
+export function dispatchHostEvent(message) {
+  dispatchMessageEvent(global.parent, message, global.document.referrer);
+}
+
+export function dispatchReadyEvent() {
+  dispatchHostEvent({ type: PLUGIN_READY });
+}
+
+export function dispatchMountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_MOUNTED });
+}
+
+export function dispatchUnmountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_UNMOUNTED });
+}
+
+export function useElementSize() {
+  const observerRef = useRef();
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const [element, setElement] = useState(null);
+
+  const measuredRef = useCallback(_element => {
+    setElement(_element);
+  }, []);
+
+  useEffect(() => {
+    observerRef.current = new ResizeObserver(() => {
+      if (element) {
+        setDimensions({
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
+        setOffset({
+          x: element.offsetLeft,
+          y: element.offsetTop,
+        });
+      }
+    });
+    if (element) {
+      observerRef.current.observe(element);
+    }
+  }, [element]);
+
+  return useMemo(
+    () => ([measuredRef, element, dimensions.width, dimensions.height, offset.x, offset.y]),
+    [measuredRef, element, dimensions, offset],
+  );
+}
--- a/plugins/data/shapes.js
+++ b/plugins/data/shapes.js
@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+import { IFRAME_PLUGIN } from './constants';
+
+export const pluginConfigShape = PropTypes.shape({
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([IFRAME_PLUGIN]).isRequired,
+  // This is a place for us to put any generic props we want to pass to the component.  We need it.
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});
--- a/plugins/index.js
+++ b/plugins/index.js
@@ -0,0 +1,18 @@
+// export {
+//   usePluginSlot,
+// } from './data/hooks';
+export {
+  default as Plugin,
+} from './Plugin';
+export {
+  default as PluginContainer,
+} from './PluginContainer';
+export {
+  default as PluginSlot,
+} from './PluginSlot';
+export {
+  IFRAME_PLUGIN,
+} from './data/constants';
+export {
+  default as PluginErrorBoundary,
+} from './PluginErrorBoundary';
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,6 +15,7 @@ import {

 import React from 'react';
 import ReactDOM from 'react-dom';
+import { useLocation } from 'react-router-dom';

 import Header from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
@@ -27,15 +28,25 @@ import Head from './head/Head';

 import AppRoutes from './routes/AppRoutes';

+const RenderFooter = () => {
+  const location = useLocation();
+  return ['/u/edx/plugin'].includes(location.pathname) ? null : <Footer />;
+};
+
+const RenderHeader = () => {
+  const location = useLocation();
+  return ['/u/edx/plugin'].includes(location.pathname) ? null : <Header />;
+};
+
 subscribe(APP_READY, () => {
  ReactDOM.render(
    <AppProvider store={configureStore()}>
      <Head />
-      <Header />
+      <RenderHeader />
      <main id="main">
        <AppRoutes />
      </main>
-      <Footer />
+      <RenderFooter />
    </AppProvider>,
    document.getElementById('root'),
  );
--- a/src/profile/Banner.jsx
+++ b/src/profile/Banner.jsx
@@ -1,5 +1,5 @@
 import React from 'react';

-const Banner = () => <div className="profile-page-bg-banner bg-primary d-md-block p-relative" />;
+const Banner = () => <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;

 export default Banner;
--- a/src/profile/DateJoined.jsx
+++ b/src/profile/DateJoined.jsx
@@ -6,7 +6,6 @@ const DateJoined = ({ date }) => {
  if (date == null) {
    return null;
  }
-
  return (
    <p className="mb-0">
      <FormattedMessage
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -126,7 +126,7 @@ class ProfilePage extends React.Component {

    return (
      <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
        <DateJoined date={dateJoined} />
        {this.isYOBDisabled() && <UsernameDescription />}
        <hr className="d-none d-md-block" />
@@ -178,7 +178,6 @@ class ProfilePage extends React.Component {
      visibilityLearningGoal,
      languageProficiencies,
      visibilityLanguageProficiencies,
-      courseCertificates,
      visibilityCourseCertificates,
      bio,
      visibilityBio,
@@ -197,17 +196,6 @@ class ProfilePage extends React.Component {
      changeHandler: this.handleChange,
    };

-    const isBlockVisible = (blockInfo) => this.isAuthenticatedUserProfile()
-      || (!this.isAuthenticatedUserProfile() && Boolean(blockInfo));
-
-    const isLanguageBlockVisible = isBlockVisible(languageProficiencies.length);
-    const isEducationBlockVisible = isBlockVisible(levelOfEducation);
-    const isSocialLinksBLockVisible = isBlockVisible(socialLinks.some((link) => link.socialLink !== null));
-    const isBioBlockVisible = isBlockVisible(bio);
-    const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
-    const isNameBlockVisible = isBlockVisible(name);
-    const isLocationBlockVisible = isBlockVisible(country);
-
    return (
      <div className="container-fluid">
        <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
@@ -224,7 +212,8 @@ class ProfilePage extends React.Component {
              />
            </div>
          </div>
-          <div className="col">
+          <div>PluginPOC</div>
+          <div className="col pl-0">
            <div className="d-md-none">
              {this.renderHeadingLockup()}
            </div>
@@ -242,58 +231,46 @@ class ProfilePage extends React.Component {
            <div className="d-md-none mb-4">
              {this.renderViewMyRecordsButton()}
            </div>
-            {isNameBlockVisible && (
-              <Name
-                name={name}
-                visibilityName={visibilityName}
-                formId="name"
-                {...commonFormProps}
-              />
-            )}
-            {isLocationBlockVisible && (
-              <Country
-                country={country}
-                visibilityCountry={visibilityCountry}
-                formId="country"
-                {...commonFormProps}
-              />
-            )}
-            {isLanguageBlockVisible && (
-              <PreferredLanguage
-                languageProficiencies={languageProficiencies}
-                visibilityLanguageProficiencies={visibilityLanguageProficiencies}
-                formId="languageProficiencies"
-                {...commonFormProps}
-              />
-            )}
-            {isEducationBlockVisible && (
-              <Education
-                levelOfEducation={levelOfEducation}
-                visibilityLevelOfEducation={visibilityLevelOfEducation}
-                formId="levelOfEducation"
-                {...commonFormProps}
-              />
-            )}
-            {isSocialLinksBLockVisible && (
-              <SocialLinks
-                socialLinks={socialLinks}
-                draftSocialLinksByPlatform={draftSocialLinksByPlatform}
-                visibilitySocialLinks={visibilitySocialLinks}
-                formId="socialLinks"
-                {...commonFormProps}
-              />
-            )}
+            <Name
+              name={name}
+              visibilityName={visibilityName}
+              formId="name"
+              {...commonFormProps}
+            />
+            <Country
+              country={country}
+              visibilityCountry={visibilityCountry}
+              formId="country"
+              {...commonFormProps}
+            />
+            <PreferredLanguage
+              languageProficiencies={languageProficiencies}
+              visibilityLanguageProficiencies={visibilityLanguageProficiencies}
+              formId="languageProficiencies"
+              {...commonFormProps}
+            />
+            <Education
+              levelOfEducation={levelOfEducation}
+              visibilityLevelOfEducation={visibilityLevelOfEducation}
+              formId="levelOfEducation"
+              {...commonFormProps}
+            />
+            <SocialLinks
+              socialLinks={socialLinks}
+              draftSocialLinksByPlatform={draftSocialLinksByPlatform}
+              visibilitySocialLinks={visibilitySocialLinks}
+              formId="socialLinks"
+              {...commonFormProps}
+            />
          </div>
          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
            {!this.isYOBDisabled() && this.renderAgeMessage()}
-            {isBioBlockVisible && (
-              <Bio
-                bio={bio}
-                visibilityBio={visibilityBio}
-                formId="bio"
-                {...commonFormProps}
-              />
-            )}
+            <Bio
+              bio={bio}
+              visibilityBio={visibilityBio}
+              formId="bio"
+              {...commonFormProps}
+            />
            {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
              <LearningGoal
                learningGoal={learningGoal}
@@ -302,13 +279,11 @@ class ProfilePage extends React.Component {
                {...commonFormProps}
              />
            )}
-            {isCertificatesBlockVisible && (
-              <Certificates
-                visibilityCourseCertificates={visibilityCourseCertificates}
-                formId="certificates"
-                {...commonFormProps}
-              />
-            )}
+            <Certificates
+              visibilityCourseCertificates={visibilityCourseCertificates}
+              formId="certificates"
+              {...commonFormProps}
+            />
          </div>
        </div>
      </div>
@@ -374,7 +349,7 @@ ProfilePage.propTypes = {

  // Learning Goal form data
  learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string,
+  visibilityLearningGoal: PropTypes.string.isRequired,

  // Other data we need
  profileImage: PropTypes.shape({
@@ -423,7 +398,6 @@ ProfilePage.defaultProps = {
  courseCertificates: null,
  requiresParentalConsent: null,
  dateJoined: null,
-  visibilityLearningGoal: null,
 };

 export default connect(
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -114,34 +114,16 @@ describe('<ProfilePage />', () => {
      expect(tree).toMatchSnapshot();
    });

-    it('viewing other profile with all fields', () => {
+    it('viewing other profile', () => {
      const contextValue = {
        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
        config: getConfig(),
      };
-
      const component = (
        <ProfilePageWrapper
          contextValue={contextValue}
-          store={mockStore({
-            ...storeMocks.viewOtherProfile,
-            profilePage: {
-              ...storeMocks.viewOtherProfile.profilePage,
-              account: {
-                ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'user',
-                country: 'EN',
-                bio: 'bio',
-                courseCertificates: ['course certificates'],
-                levelOfEducation: 'some level',
-                languageProficiencies: ['some lang'],
-                socialLinks: ['twitter'],
-                timeZone: 'time zone',
-                accountPrivacy: 'all_users',
-              },
-            },
-          })}
-          match={{ params: { username: 'verified' } }} // Override default match
+          store={mockStore(storeMocks.viewOtherProfile)}
+          params={{ username: 'verified' }} // Override default params
        />
      );
      const tree = renderer.create(component).toJSON();
--- a/src/profile/ProfilePluginPage.jsx
+++ b/src/profile/ProfilePluginPage.jsx
@@ -0,0 +1,217 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import { injectIntl, intlShape, FormattedDate } from '@edx/frontend-platform/i18n';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import {
+  ActionRow, Avatar, Card, Hyperlink, Icon,
+} from '@edx/paragon';
+import { HistoryEdu, VerifiedUser } from '@edx/paragon/icons';
+
+import get from 'lodash.get';
+
+import PluginCountry from './forms/PluginCountry';
+import { Plugin } from '../../plugins';
+
+// Actions
+import {
+  fetchProfile,
+} from './data/actions';
+
+// Components
+import PageLoading from './PageLoading';
+
+// Selectors
+import { profilePageSelector } from './data/selectors';
+
+// i18n
+import messages from './ProfilePage.messages';
+import eduMessages from './forms/Education.messages';
+
+import withParams from '../utils/hoc';
+
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+
+// eslint-disable-next-line react/function-component-definition
+function Fallback() {
+  return (
+    <div>this is broken as all get</div>
+  );
+}
+
+const platformDisplayInfo = {
+  facebook: {
+    icon: faFacebook,
+    name: '',
+  },
+  twitter: {
+    icon: faTwitter,
+    name: '',
+  },
+  linkedin: {
+    icon: faLinkedin,
+    name: '',
+  },
+};
+
+class ProfilePluginPage extends React.Component {
+  componentDidMount() {
+    this.props.fetchProfile(this.props.params.username);
+  }
+
+  renderContent() {
+    const {
+      profileImage,
+      country,
+      levelOfEducation,
+      socialLinks,
+      isLoadingProfile,
+      dateJoined,
+      intl,
+    } = this.props;
+
+    if (isLoadingProfile) {
+      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
+    }
+
+    return (
+      <Plugin fallbackComponent={<Fallback />}>
+        <Card className="mb-2">
+          <Card.Header
+            className="pb-5"
+            subtitle={(
+              <Hyperlink destination={`http://localhost:1995/u/${this.props.params.username}`}>
+                View public profile
+              </Hyperlink>
+            )}
+            actions={
+              (
+                <ActionRow className="mt-3">
+                  {socialLinks
+                    .filter(({ socialLink }) => Boolean(socialLink))
+                    .map(({ platform, socialLink }) => (
+                      <StaticListItem
+                        key={platform}
+                        name={platformDisplayInfo[platform].name}
+                        url={socialLink}
+                        platform={platform}
+                      />
+                    ))}
+                </ActionRow>
+              )
+            }
+          />
+          <Card.Section className="text-center" muted>
+            <Avatar
+              size="xl"
+              className="profile-plugin-avatar"
+              src={profileImage.src}
+              alt="Profile image"
+            />
+            <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
+            <PluginCountry
+              country={country}
+            />
+          </Card.Section>
+          <Card.Footer className="p-0">
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={VerifiedUser} />
+              <p>
+                since <FormattedDate value={new Date(dateJoined)} year="numeric" />
+              </p>
+            </Card.Section>
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={HistoryEdu} />
+              <p>
+                {intl.formatMessage(get(
+                  eduMessages,
+                  `profile.education.levels.${levelOfEducation}`,
+                  eduMessages['profile.education.levels.o'],
+                ))}
+              </p>
+            </Card.Section>
+          </Card.Footer>
+        </Card>
+      </Plugin>
+    );
+  }
+
+  render() {
+    return (
+      <div className="profile-page">
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+const SocialLink = ({ url, name, platform }) => (
+  <a href={url} className="font-weight-bold">
+    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+    {name}
+  </a>
+);
+
+const StaticListItem = ({ url, name, platform }) => (
+  <ul className="list-inline">
+    <SocialLink name={name} url={url} platform={platform} />
+  </ul>
+);
+
+ProfilePluginPage.contextType = AppContext;
+
+ProfilePluginPage.propTypes = {
+  // Account data
+  dateJoined: PropTypes.string,
+
+  // Country form data
+  country: PropTypes.string,
+
+  // Education form data
+  levelOfEducation: PropTypes.string,
+
+  // Social links form data
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    platform: PropTypes.string,
+    socialLink: PropTypes.string,
+  })),
+
+  // Other data we need
+  profileImage: PropTypes.shape({
+    src: PropTypes.string,
+    isDefault: PropTypes.bool,
+  }),
+  isLoadingProfile: PropTypes.bool.isRequired,
+
+  // Actions
+  fetchProfile: PropTypes.func.isRequired,
+
+  // Router
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+ProfilePluginPage.defaultProps = {
+  profileImage: {},
+  levelOfEducation: null,
+  country: null,
+  socialLinks: [],
+  dateJoined: null,
+};
+
+export default connect(
+  profilePageSelector,
+  {
+    fetchProfile,
+  },
+)(injectIntl(withParams(ProfilePluginPage)));
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div>
    <div
@@ -36,7 +36,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -103,8 +103,11 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -113,7 +116,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -191,7 +194,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -1696,7 +1699,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                        id="visibilityCountry"
                        name="visibilityCountry"
                        onChange={[Function]}
@@ -2307,7 +2310,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -2419,7 +2422,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -2486,8 +2489,11 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -2496,7 +2502,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -2574,7 +2580,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -3053,7 +3059,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                        id="visibilityLevelOfEducation"
                        name="visibilityLevelOfEducation"
                        onChange={[Function]}
@@ -3484,7 +3490,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -3596,7 +3602,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -3663,8 +3669,11 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -3673,7 +3682,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -3751,7 +3760,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -5015,7 +5024,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                        id="visibilityLanguageProficiencies"
                        name="visibilityLanguageProficiencies"
                        onChange={[Function]}
@@ -5536,7 +5545,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -5643,12 +5652,12 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
 </div>
 `;

-exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
 <div
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -5692,8 +5701,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -5702,9 +5714,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
-              staff
+              verified
            </h1>
            <p
              className="mb-0"
@@ -5747,52 +5759,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
        </div>
        <div
          className="d-none d-md-block float-right"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "height": "1em",
-                    "width": "1em",
-                  }
-                }
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <span
-                  className="sr-only"
-                >
-                  in a new tab
-                </span>
-              </span>
-            </span>
-          </a>
-        </div>
+        />
      </div>
    </div>
    <div
@@ -5808,9 +5775,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
-              staff
+              verified
            </h1>
            <p
              className="mb-0"
@@ -5853,52 +5820,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
        </div>
        <div
          className="d-md-none mb-4"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "height": "1em",
-                    "width": "1em",
-                  }
-                }
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <span
-                  className="sr-only"
-                >
-                  in a new tab
-                </span>
-              </span>
-            </span>
-          </a>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5906,32 +5828,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              user
-            </p>
-          </div>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5939,30 +5836,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            />
-          </div>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -5970,30 +5844,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Primary Language Spoken
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            />
-          </div>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -6001,32 +5852,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Education
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Other education
-            </p>
-          </div>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-5"
          style={
@@ -6034,29 +5860,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Social Links
-              </h2>
-            </div>
-            <ul
-              className="list-unstyled"
-            />
-          </div>
-        </div>
+        />
      </div>
      <div
        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
@@ -6068,32 +5872,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                About Me
-              </h2>
-            </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              bio
-            </p>
-          </div>
-        </div>
+        />
        <div
          className="pgn-transition-replace-group position-relative mb-4"
          style={
@@ -6101,27 +5880,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
              "height": null,
            }
          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                My Certificates
-              </h2>
-            </div>
-            You don't have any certificates yet.
-          </div>
-        </div>
+        />
      </div>
    </div>
  </div>
@@ -6133,7 +5892,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -6200,8 +5959,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -6210,7 +5972,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -6288,7 +6050,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -7071,7 +6833,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -7183,7 +6945,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -7250,8 +7012,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -7260,7 +7025,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -7338,7 +7103,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -8026,7 +7791,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                        id="visibilityBio"
                        name="visibilityBio"
                        onChange={[Function]}
@@ -8188,7 +7953,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -8300,7 +8065,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -8367,8 +8132,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -8377,7 +8145,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -8455,7 +8223,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -9151,7 +8919,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                        </svg>
                      </span>
                      <select
-                        className="d-inline-block form-control"
+                        className="d-inline-block w-auto form-control"
                        id="visibilityBio"
                        name="visibilityBio"
                        onChange={[Function]}
@@ -9313,7 +9081,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
@@ -9425,7 +9193,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
  className="profile-page"
 >
  <div
-    className="profile-page-bg-banner bg-primary d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
  />
  <div
    className="container-fluid"
@@ -9492,8 +9260,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
          </div>
        </div>
      </div>
+      <div>
+        PluginPOC
+      </div>
      <div
-        className="col"
+        className="col pl-0"
      >
        <div
          className="d-md-none"
@@ -9502,7 +9273,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -9535,7 +9306,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            data-hj-suppress={true}
          >
            <h1
-              className="h2 mb-0 font-weight-bold text-truncate"
+              className="h2 mb-0 font-weight-bold"
            >
              staff
            </h1>
@@ -10273,7 +10044,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
              className="row align-items-stretch"
            >
              <div
-                className="col-12 col-sm-6 d-flex align-items-stretch"
+                className="col col-sm-6 d-flex align-items-stretch"
              >
                <div
                  className="card mb-4 certificate flex-grow-1"
--- a/src/profile/data/sagas.js
+++ b/src/profile/data/sagas.js
@@ -66,25 +66,6 @@ export function* handleFetchProfile(action) {
    } else {
      [account, courseCertificates] = result;
    }
-
-    // Set initial visibility values for account
-    // Set account_privacy as custom is necessary so that when viewing another user's profile,
-    // their full name is displayed and change visibility forms are worked correctly
-    if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
-      yield call(ProfileApiService.patchPreferences, action.payload.username, {
-        account_privacy: 'custom',
-        'visibility.name': 'all_users',
-        'visibility.bio': 'all_users',
-        'visibility.course_certificates': 'all_users',
-        'visibility.country': 'all_users',
-        'visibility.date_joined': 'all_users',
-        'visibility.level_of_education': 'all_users',
-        'visibility.language_proficiencies': 'all_users',
-        'visibility.social_links': 'all_users',
-        'visibility.time_zone': 'all_users',
-      });
-    }
-
    yield put(fetchProfileSuccess(
      account,
      preferences,
--- a/src/profile/data/selectors.js
+++ b/src/profile/data/selectors.js
@@ -35,12 +35,9 @@ export const editableFormModeSelector = createSelector(
    // or is being hidden from us (for other users' profiles)
    let propExists = account[formId] != null && account[formId].length > 0;
    propExists = formId === 'certificates' ? certificates.length > 0 : propExists; // overwrite for certificates
-    // If this isn't the current user's profile
-    if (!isAuthenticatedUserProfile) {
-      return 'static';
-    }
+    // If this isn't the current user's profile or if
    // the current user has no age set / under 13 ...
-    if (account.requiresParentalConsent) {
+    if (!isAuthenticatedUserProfile || account.requiresParentalConsent) {
      // then there are only two options: static or nothing.
      // We use 'null' as a return value because the consumers of
      // getMode render nothing at all on a mode of null.
@@ -231,13 +228,13 @@ export const visibilitiesSelector = createSelector(
    switch (accountPrivacy) {
      case 'custom':
        return {
-          visibilityBio: preferences.visibilityBio || 'all_users',
-          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'all_users',
-          visibilityCountry: preferences.visibilityCountry || 'all_users',
-          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
-          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
-          visibilityName: preferences.visibilityName || 'all_users',
-          visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
+          visibilityBio: preferences.visibilityBio || 'private',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'private',
+          visibilityCountry: preferences.visibilityCountry || 'private',
+          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'private',
+          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'private',
+          visibilityName: preferences.visibilityName || 'private',
+          visibilitySocialLinks: preferences.visibilitySocialLinks || 'private',
        };
      case 'private':
        return {
--- a/src/profile/forms/Certificates.jsx
+++ b/src/profile/forms/Certificates.jsx
@@ -68,7 +68,7 @@ class Certificates extends React.Component {
    })();

    return (
-      <div key={`${modifiedDate}-${courseId}`} className="col-12 col-sm-6 d-flex align-items-stretch">
+      <div key={`${modifiedDate}-${courseId}`} className="col col-sm-6 d-flex align-items-stretch">
        <div className="card mb-4 certificate flex-grow-1">
          <div
            className="certificate-type-illustration"
--- a/src/profile/forms/PluginCountry.jsx
+++ b/src/profile/forms/PluginCountry.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { LocationOn } from '@edx/paragon/icons';
+
+// Selectors
+import { countrySelector } from '../data/selectors';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class PluginCountry extends React.Component {
+  render() {
+    const {
+      country,
+      countryMessages,
+    } = this.props;
+
+    return (
+      <div className="pgn-icons-cell-horizontal">
+        <Icon src={LocationOn} />
+        <p className="h5 mt-1 ml-1">{countryMessages[country]}</p>
+      </div>
+    );
+  }
+}
+
+PluginCountry.propTypes = {
+  country: PropTypes.string,
+  countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+PluginCountry.defaultProps = {
+  country: null,
+};
+
+export default connect(
+  countrySelector,
+  {},
+)(injectIntl(PluginCountry));
--- a/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
+++ b/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
@@ -119,7 +119,7 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
                </svg>
              </span>
              <select
-                className="d-inline-block form-control"
+                className="d-inline-block w-auto form-control"
                id="visibilitySocialLinks"
                name="visibilitySocialLinks"
                onChange={[Function]}
--- a/src/profile/forms/elements/Visibility.jsx
+++ b/src/profile/forms/elements/Visibility.jsx
@@ -39,7 +39,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
      <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
        <FontAwesomeIcon icon={icon} />
      </span>
-      <select className="d-inline-block form-control" {...props}>
+      <select className="d-inline-block w-auto form-control" {...props}>
        <option key="private" value="private">
          {intl.formatMessage(messages['profile.visibility.who.just.me'])}
        </option>
--- a/src/profile/index.js
+++ b/src/profile/index.js
@@ -3,3 +3,4 @@ export { default as saga } from './data/sagas';
 export { default as ProfilePage } from './ProfilePage';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as messages } from './ProfilePage.messages';
+export { default as ProfilePluginPage } from './ProfilePluginPage';
--- a/src/profile/index.scss
+++ b/src/profile/index.scss
@@ -162,4 +162,28 @@
      position: relative;
    }
  }
+
+  .pgn-icons-cell-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin: 1px;
+  }
+  .pgn-icons-cell-horizontal {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 1px;
+  }
+
+  .profile-plugin-avatar {
+    @include media-breakpoint-up(xs) {
+      max-width: 12rem;
+      margin-right: 0;
+      margin-top: -4rem;
+      margin-bottom: 1rem;
+    }
+  }
+
 }
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -4,11 +4,12 @@ import {
  PageWrap,
 } from '@edx/frontend-platform/react';
 import { Routes, Route } from 'react-router-dom';
-import { ProfilePage, NotFoundPage } from '../profile';
+import { ProfilePage, NotFoundPage, ProfilePluginPage } from '../profile';

 const AppRoutes = () => (
  <Routes>
    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/u/:username/plugin" element={<AuthenticatedPageRoute><ProfilePluginPage /></AuthenticatedPageRoute>} />
    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
  </Routes>
--- a/src/routes/routes.test.jsx
+++ b/src/routes/routes.test.jsx
@@ -15,6 +15,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
 jest.mock('../profile', () => ({
  ProfilePage: () => (<div>Profile page</div>),
  NotFoundPage: () => (<div>Not found page</div>),
+  ProfilePluginPage: () => (<div>Plugin page</div>),
 }));

 const RoutesWithProvider = (context, path) => (
@@ -54,6 +55,22 @@ describe('routes', () => {
    expect(screen.getByText('Profile page')).toBeTruthy();
  });

+  test('Profile Plugin page should be accessible for authenticated users', () => {
+    render(
+      RoutesWithProvider(
+        {
+          authenticatedUser: {
+            username: 'edx',
+            email: 'edx@example.com',
+          },
+          config: getConfig(),
+        },
+        '/u/edx/plugin',
+      ),
+    );
+    expect(screen.getByText('Plugin page')).toBeTruthy();
+  });
+
  test('should show NotFound page for a bad route', () => {
    render(
      RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),
Author	SHA1	Message	Date
Chris Deery	bd931338d8	Merge pull request #885 from openedx/PluginPOC/addTag feat: add little tag to identify POC	2023-10-19 12:08:44 -04:00
Chris Deery	f03d5afa0d	fix: update snapshot	2023-10-19 15:58:39 +00:00
Chris Deery	910e17f75d	feat: add little tag to identify POC	2023-10-19 15:34:04 +00:00
Jason Wesson	2fa5cadf22	fix: rebase pluginPOCFeature with master branch (#884 ) * fix(deps): update dependency @edx/paragon to v20.46.3 * chore(deps): update commitlint monorepo to v17.8.0 * fix(deps): update dependency @edx/frontend-component-footer to v12.4.0 * chore: bump frontend-platform (#869) * fix: Add ID attribute to the main content (#845) * chore: update browserslist DB (#871) * fix(deps): update dependency @edx/frontend-platform to v5.6.1 (#875) * build(deps): bump @babel/traverse from 7.22.5 to 7.23.2 (#879) * bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.5 to 7.23.2. * fix(deps): update dependency core-js to v3.33.0 (#876)	2023-10-18 11:58:21 -07:00
Jason Wesson	bd8221997e	Move changes from ProfilePluginPOC to aperture/PluginPOCFeature (#883 ) * build: create profile plugin page * build: add plugins folder to Profile * build: wrap Profile Plugin Page with Plugin Co-authored-by: Jason Wesson <jwesson@2u.com>	2023-10-18 11:43:43 -07:00