refactor: move fields specific code to their wrappers

Description:
Applied frontend validations on all the fields
VAN-1614

.env

@@ -13,20 +13,29 @@ ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=''
 SITE_NAME=null
-USER_INFO_COOKIE_NAME=null
-AUTHN_MINIMAL_HEADER=true
-LOGIN_ISSUE_SUPPORT_LINK=''
-USER_SURVEY_COOKIE_NAME=null
-COOKIE_DOMAIN=null
-WELCOME_PAGE_SUPPORT_LINK=null
 INFO_EMAIL=''
-DISABLE_ENTERPRISE_LOGIN=''
+# ***** Cookies *****
 REGISTER_CONVERSION_COOKIE_NAME=null
-ENABLE_PROGRESSIVE_PROFILING=''
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK=''
+AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
+# ***** Features flags *****
+DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
+ENABLE_POPULAR_AND_TRENDING_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
-ENABLE_COPPA_COMPLIANCE=''
+SHOW_CONFIGURABLE_EDX_FIELDS=''
+# ***** Zendesk related keys *****
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
+# ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
-ENABLE_COOKIE_POLICY_BANNER=''

.env.development

@@ -18,21 +18,24 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
+INFO_EMAIL='info@example.com'
+# ***** Cookies *****
+REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
+SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
-AUTHN_MINIMAL_HEADER=true
-LOGIN_ISSUE_SUPPORT_LINK='/login-issue-support-url'
+# ***** Links *****
+LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 TOS_AND_HONOR_CODE='http://localhost:18000/honor'
 TOS_LINK='http://localhost:18000/tos'
 PRIVACY_POLICY='http://localhost:18000/privacy'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
-COOKIE_DOMAIN='localhost'
-WELCOME_PAGE_SUPPORT_LINK='http://localhost:1999/welcome'
-INFO_EMAIL='info@edx.org'
-DISABLE_ENTERPRISE_LOGIN=''
-REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
-ENABLE_COPPA_COMPLIANCE=''
-MARKETING_EMAILS_OPT_IN=''
-ZENDESK_KEY=''
-ZENDESK_LOGO_URL=''
+AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK='http://localhost:1999/welcome'
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
+# ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ZENDESK_KEY=''
+ZENDESK_LOGO_URL=''

.env.private.example

@@ -0,0 +1,4 @@
+# Copy these to the .env.private to enable edX specific functionality on local system
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
+MARKETING_EMAILS_OPT_IN='true'
+SHOW_CONFIGURABLE_EDX_FIELDS='true'

.env.test

@@ -16,15 +16,6 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
-USER_INFO_COOKIE_NAME='edx-user-info'
-LOGIN_ISSUE_SUPPORT_LINK='https://login-issue-support-url.com'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
-WELCOME_PAGE_SUPPORT_LINK='http://localhost:1999/welcome'
-DISABLE_ENTERPRISE_LOGIN=''
 REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
-MARKETING_EMAILS_OPT_IN=''
-ENABLE_COPPA_COMPLIANCE=''
-ZENDESK_KEY=''
-ZENDESK_LOGO_URL=''
 APP_ID=''
 MFE_CONFIG_API_URL=''

.eslintignore

@@ -1,5 +1,6 @@
 coverage/*
 dist/
+docs
 node_modules/
 __mocks__/
 __snapshots__/

.eslintrc.js

@@ -1,16 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
-    // to fail for no apparent reason since upgrading 
+    // to fail for no apparent reason since upgrading
     // @edx/frontend-build from v3 to v5:
     // - TypeError: Cannot read property 'range' of null
-    'indent': [
+    indent: [
       'error',
       2,
-      { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }
+      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
     ],
     'template-curly-spacing': 'off',
     'jsx-a11y/label-has-associated-control': ['error', {
@@ -18,9 +19,9 @@ module.exports = createConfig('eslint', {
       labelAttributes: [],
       controlComponents: [],
       assert: 'htmlFor',
-      depth: 25
+      depth: 25,
     }],
-    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
     'import/order': [
       'error',
       {
@@ -46,5 +47,6 @@ module.exports = createConfig('eslint', {
         },
       },
     ],
+    'function-paren-newline': 'off',
   },
 });

.github/pull_request_template.md

@@ -2,11 +2,16 @@
 
 Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.
 
+#### JIRA
+
+[XXX-XXXX](https://2u-internal.atlassian.net/browse/XXX-XXXX)
+
 #### How Has This Been Tested?
 
 Please describe in detail how you tested your changes.
 
 #### Screenshots/sandbox (optional):
+
 Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if its not applicable.**
 
 |Before|After|
@@ -21,4 +26,4 @@ Include a link to the sandbox for design changes or screenshot for before and af
 #### Post-merge Checklist
 
 * [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/vanguards** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
+* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -16,4 +16,4 @@ jobs:
     secrets:
       GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
       GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/autoupdate-pull-request.yml

@@ -0,0 +1,25 @@
+name: autoupdate
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types: [ labeled ]  
+    branches:
+      - master  
+jobs:
+  autoupdate:
+    name: autoupdate
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: docker://chinthakagodawita/autoupdate-action:v1
+        env:
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          DRY_RUN: "false"
+          PR_FILTER: "labelled"
+          PR_LABELS: "autoupdate"
+          EXCLUDED_LABELS: "dependencies,wontfix"
+          MERGE_MSG: "Branch was auto-updated."
+          RETRY_COUNT: "5"
+          RETRY_SLEEP: "300"
+          MERGE_CONFLICT_ACTION: "fail"

.github/workflows/ci.yml

@@ -11,17 +11,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [16]
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-
+      uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install Dependencies
       run: npm ci

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -5,6 +5,7 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
+.env.private
 
 dist/
 src/i18n/transifex_input.json

.nvmrc

@@ -0,0 +1 @@
+18

CODEOWNERS

@@ -1,2 +1,2 @@
 # The following users are the owners of all frontend-app-authn files
-*       @edx/vanguards
+*       @openedx/vanguards

Makefile

@@ -1,6 +1,7 @@
 export TRANSIFEX_RESOURCE = frontend-app-authn
-transifex_langs = "ar,fr,es_419,zh_CN,it_IT,pt_PT,de_DE,uk,ru,hi"
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -42,11 +43,37 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull --filter=$(transifex_langs) \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-# This target is used by CI.
+	$(intl_imports) paragon frontend-app-authn
+endif
+
+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
+
+.PHONY: validate
+validate:
+	make validate-no-uncommitted-package-lock-changes
+	npm run i18n_extract
+	npm run lint -- --max-warnings 0
+	npm run test
+	npm run build
+
+.PHONY: validate.ci
+validate.ci:
+	npm ci
+	make validate

README.rst

@@ -72,8 +72,8 @@ The authentication micro-frontend also requires the following additional variabl
      - The fully-qualified URL to the password reset support page in the target environment.
      - ``https://support.example.com``
 
-   * - ``WELCOME_PAGE_SUPPORT_LINK``
-     - The fully-qualified URL to the welcome support page in the target environment.
+   * - ``AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK``
+     - The fully-qualified URL to the progressive profiling support page in the target environment.
      - ``https://support.example.com``
 
    * - ``TOS_AND_HONOR_CODE``
@@ -96,7 +96,7 @@ The authentication micro-frontend also requires the following additional variabl
      - Enables support for configurable registration fields on the MFE. This flag must be enabled to show any required registration field besides the default fields (name, email, username, password).
      - ``true`` | ``''`` (empty strings are falsy)
 
-   * - ``ENABLE_PROGRESSIVE_PROFILING``
+   * - ``ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN``
      - Enables support for progressive profiling. If enabled, users are redirected to a second page where data for optional registration fields can be collected.
      - ``true`` | ``''`` (empty strings are falsy)
 
@@ -104,6 +104,15 @@ The authentication micro-frontend also requires the following additional variabl
      - Disables the enterprise login from Authn MFE.
      - ``true`` | ``''`` (empty strings are falsy)
 
+   * - ``MFE_CONFIG_API_URL``
+     - Link of the API to get runtime mfe configuration variables from the site configuration or django settings.
+     - ``/api/v1/mfe_config`` | ``''`` (empty strings are falsy)  
+
+   * - ``APP_ID``
+     - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID.
+     - ``authn`` | ``''``
+
+
 edX-specific Environment Variables
 **********************************
 
@@ -121,14 +130,52 @@ Furthermore, there are several edX-specific environment variables that enable in
      - Enables support for opting in marketing emails that helps us getting user consent for sending marketing emails.
      - ``true`` | ``''`` (empty strings are falsy)
 
+   * - ``SHOW_CONFIGURABLE_EDX_FIELDS``
+     - For edX, country and honor code fields are required by default. This flag enables edX specific required fields.
+     - ``true`` | ``''`` (empty strings are falsy)    
+
 For more information see the document: `Micro-frontend applications in Open
 edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
+How To Contribute
+------------
+Contributions are very welcome, and strongly encouraged! We've
+put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
+
+Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
+
+PR description template should be automatically applied if you are sending PR from github interface; otherwise you
+can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-authn/blob/master/.github/pull_request_template.md>`_
+
+This project is currently accepting all types of contributions, bug fixes and security fixes.
+
+Open edX Code of Conduct
+------------------------
+All community members are expected to follow the `Open edX Code of Conduct <https://openedx.org/code-of-conduct/>`_.
+
+People
+------
+The assigned maintainers for this component and other project details may be
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/vanguards>`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+Reporting Security Issues
+-------------------------
+
+Please do not report security issues in public. Please email security@edx.org.
+
 Known Issues
 ------------
 
 None
 
+License
+-------
+
+The code in this repository is licensed under the GNU Affero General Public License v3.0, unless
+otherwise noted.
+
+Please see `LICENSE <https://github.com/openedx/frontend-app-authn/blob/master/LICENSE>`_ for details.
 
 ==============================
 

catalog-info.yaml

@@ -0,0 +1,18 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-authn'
+  description: "Micro-frontend for authentication service. It contains views for login, registration and password reset functionality."
+  links:
+    - url: 'https://github.com/openedx/frontend-app-authn/blob/master/README.rst'
+      title: 'Documentation'
+      icon: 'Article'
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:vanguards
+  type: 'service'
+  lifecycle: 'production'

docs/decisions/0002-feature-based-application-organization.rst

@@ -91,7 +91,7 @@ In the data sub-directory, the file names describe what each piece of code does.
     /ProfilePhotoUploader.jsx // supporting view
     /data // Note: most files here are named with a plural, as they contain many of the things in question.
       /actions.js
-      /constants.js
+      /mockedData.js
       /reducers.js
       /sagas.js
       /selectors.js

openedx.yaml

@@ -3,6 +3,6 @@
 
 nick: Authn MFE
 oeps: {}
-owner: edx/vanguards
+owner: openedx/vanguards
 openedx-release:
   ref: master

package.json

@@ -32,57 +32,52 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-cookie-policy-banner": "2.2.0",
-    "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "20.20.0",
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-brands-svg-icons": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/frontend-platform": "^5.0.0",
+    "@edx/paragon": "20.46.2",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@redux-devtools/extension": "3.2.3",
+    "@optimizely/react-sdk": "^2.9.1",
+    "@redux-devtools/extension": "3.2.5",
+    "algoliasearch": "^4.14.3",
     "classnames": "2.3.2",
-    "core-js": "3.26.1",
-    "extract-react-intl-messages": "4.1.1",
+    "core-js": "3.32.0",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "4.2.1",
-    "lodash.camelcase": "4.3.0",
-    "lodash.snakecase": "4.1.1",
+    "form-urlencoded": "6.1.0",
     "prop-types": "15.8.1",
-    "query-string": "5.1.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "query-string": "7.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "2.2.0",
-    "react-onclickoutside": "6.12.2",
+    "react-loading-skeleton": "3.3.1",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
+    "react-zendesk": "^0.1.13",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
-    "redux-saga": "1.2.1",
+    "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.7",
-    "sanitize-html": "2.7.3",
-    "semver-regex": "3.1.4",
+    "regenerator-runtime": "0.14.0",
+    "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.9.8",
     "@edx/reactifex": "1.1.0",
-    "babel-plugin-formatjs": "10.3.31",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-formatjs": "10.5.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.28.0",
     "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",
-    "jest": "27.5.1",
-    "react-test-renderer": "16.14.0"
+    "jest": "29.6.2",
+    "react-test-renderer": "^17.0.2"
   }
 }

public/index.html

@@ -4,6 +4,11 @@
       <title>Authn | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
+              integrity="sha512-R7Piufj0/o6jG9ZKrAvS2dblFr2kkuG4XVQwStX+/4P+KwOLUXn2DXy0l1AJDxxqGhkM/FJllZHG2PKOAheYzg=="
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer">
+      </script>
       <% if (process.env.OPTIMIZELY_URL) { %>
         <script
           src="<%= process.env.OPTIMIZELY_URL %>"
@@ -13,58 +18,6 @@
           src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
         ></script>
       <% } %>
-      <% if (process.env.ZENDESK_KEY) { %>
-        <script
-          id="ze-snippet"
-          src="https://static.zdassets.com/ekr/snippet.js?key=<%= process.env.ZENDESK_KEY %>"
-        >
-        </script>
-        <script type="text/javascript">
-          window.zESettings = {
-            cookies: true,
-            webWidget: {
-              contactOptions: {
-                enabled: false,
-              },
-              chat: {
-                suppress: false,
-              },
-              contactForm: {
-                ticketForms: [
-                  {
-                    id: 360003368814,
-                    subject: false,
-                    fields: [
-                      {
-                        id: 'description',
-                        prefill: {
-                          '*': '',
-                        },
-                      },
-                    ],
-                  },
-                ],
-                selectTicketForm: {
-                  '*': 'Please choose your request type:',
-                },
-                attachments: true,
-              },
-              helpCenter: {
-                originalArticleButton: true,
-              },
-              answerBot: {
-                suppress: false,
-                contactOnlyAfterQuery: true,
-                title: { '*': 'edX Support' },
-                avatar: {
-                  url: '<%= process.env.ZENDESK_LOGO_URL %>',
-                  name: { '*': 'edX Support' },
-                },
-              },
-            },
-          };
-        </script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

src/MainApp.jsx

@@ -3,19 +3,30 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { Helmet } from 'react-helmet';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  Logistration, NotFoundPage, registerIcons, UnAuthOnlyRoute,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
-  LOGIN_PAGE, PAGE_NOT_FOUND, PASSWORD_RESET_CONFIRM, REGISTER_PAGE, RESET_PAGE, WELCOME_PAGE,
+  AUTHN_PROGRESSIVE_PROFILING,
+  LOGIN_PAGE,
+  PAGE_NOT_FOUND,
+  PASSWORD_RESET_CONFIRM,
+  RECOMMENDATIONS,
+  REGISTER_EMBEDDED_PAGE,
+  REGISTER_PAGE,
+  RESET_PAGE,
 } from './data/constants';
 import { updatePathWithQueryParams } from './data/utils';
-import ForgotPasswordPage from './forgot-password';
-import ResetPasswordPage from './reset-password';
-import { ProgressiveProfiling } from './welcome';
+import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import { ProgressiveProfiling } from './progressive-profiling';
+import { RecommendationsPage } from './recommendations';
+import { EmbeddableRegistrationPage } from './register';
+import { ResetPasswordPage } from './reset-password';
+
 import './index.scss';
 
 registerIcons();
@@ -25,20 +36,27 @@ const MainApp = () => (
     <Helmet>
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
-    <Switch>
-      <Route exact path="/">
-        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
-      </Route>
-      <UnAuthOnlyRoute exact path={LOGIN_PAGE} render={() => <Logistration selectedPage={LOGIN_PAGE} />} />
-      <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={Logistration} />
-      <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
-      <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
-      <Route exact path={WELCOME_PAGE} component={ProgressiveProfiling} />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
+    {getConfig().ZENDESK_KEY && <Zendesk />}
+    <Routes>
+      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+      <Route
+        path={REGISTER_EMBEDDED_PAGE}
+        element={<EmbeddedRegistrationRoute><EmbeddableRegistrationPage /></EmbeddedRegistrationRoute>}
+      />
+      <Route
+        path={LOGIN_PAGE}
+        element={
+          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+        }
+      />
+      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+    </Routes>
   </AppProvider>
 );
 

src/base-component/AuthLargeLayout.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthLargeLayout = ({ intl, username }) => (
-  <div className="w-50 d-flex">
-    <div className="col-md-10 bg-light-200 p-0">
-      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
-      </Hyperlink>
-      <div className="min-vh-100 d-flex align-items-center">
-        <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
-        <div>
-          <h1 className="welcome-to-platform data-hj-suppress">
-            {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-          </h1>
-          <h2 className="complete-your-profile">
-            {intl.formatMessage(messages['complete.your.profile.1'])}
-            <div className="text-accent-a">
-              {intl.formatMessage(messages['complete.your.profile.2'])}
-            </div>
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div className="col-md-2 bg-white p-0">
-      <svg className="m1-n1 w-100 h-100 large-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-        <g transform="skewX(171.6)">
-          <rect x="0" y="0" height="100%" width="100%" />
-        </g>
-      </svg>
-    </div>
-  </div>
-);
-
-AuthLargeLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthLargeLayout);

src/base-component/AuthMediumLayout.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthMediumLayout = ({ intl, username }) => (
-  <>
-    <div className="w-100 medium-screen-top-stripe" />
-    <div className="w-100 p-0 mb-3 d-flex">
-      <div className="col-md-10 bg-light-200">
-        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-          <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
-        </Hyperlink>
-        <div className="d-flex align-items-center justify-content-center mb-4 ml-5">
-          <div className="medium-yellow-line mt-5 mr-n2" />
-          <div>
-            <h1 className="h3 data-hj-suppress mw-320">
-              {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-            </h1>
-            <h2 className="display-1">
-              {intl.formatMessage(messages['complete.your.profile.1'])}
-              <div className="text-accent-a">
-                {intl.formatMessage(messages['complete.your.profile.2'])}
-              </div>
-            </h2>
-          </div>
-        </div>
-      </div>
-      <div className="col-md-2 bg-white p-0">
-        <svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(168)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  </>
-);
-
-AuthMediumLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthMediumLayout);

src/base-component/AuthSmallLayout.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-
-const AuthSmallLayout = ({ intl, username }) => (
-  <div className="min-vw-100 bg-light-200">
-    <div className="col-md-12 small-screen-top-stripe" />
-    <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-      <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
-    </Hyperlink>
-    <div className="d-flex align-items-center mb-3 mt-3 mr-3">
-      <div className="small-yellow-line mt-4.5" />
-      <div>
-        <h1 className="h5 data-hj-suppress">
-          {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
-        </h1>
-        <h2 className="h1">
-          {intl.formatMessage(messages['complete.your.profile.1'])}
-          <div className="text-accent-a">
-            {intl.formatMessage(messages['complete.your.profile.2'])}
-          </div>
-        </h2>
-      </div>
-    </div>
-  </div>
-);
-
-AuthSmallLayout.propTypes = {
-  intl: intlShape.isRequired,
-  username: PropTypes.string.isRequired,
-};
-
-export default injectIntl(AuthSmallLayout);

src/base-component/BaseComponent.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { getLocale } from '@edx/frontend-platform/i18n';
-import { breakpoints } from '@edx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-
-import AuthLargeLayout from './AuthLargeLayout';
-import AuthMediumLayout from './AuthMediumLayout';
-import AuthSmallLayout from './AuthSmallLayout';
-import LargeLayout from './LargeLayout';
-import MediumLayout from './MediumLayout';
-import SmallLayout from './SmallLayout';
-
-const BaseComponent = ({ children, showWelcomeBanner }) => {
-  const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
-  const username = authenticatedUser ? authenticatedUser.username : null;
-
-  return (
-    <>
-      {getConfig().ENABLE_COOKIE_POLICY_BANNER ? <CookiePolicyBanner languageCode={getLocale()} /> : null}
-      <div className="col-md-12 extra-large-screen-top-stripe" />
-      <div className="layout">
-        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {authenticatedUser ? <AuthSmallLayout username={username} /> : <SmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {authenticatedUser ? <AuthMediumLayout username={username} /> : <MediumLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
-          {authenticatedUser ? <AuthLargeLayout username={username} /> : <LargeLayout />}
-        </MediaQuery>
-
-        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
-          {children}
-        </div>
-      </div>
-    </>
-  );
-};
-
-BaseComponent.defaultProps = {
-  showWelcomeBanner: false,
-};
-
-BaseComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-  showWelcomeBanner: PropTypes.bool,
-};
-
-export default BaseComponent;

src/base-component/LargeLayout.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const LargeLayout = ({ intl }) => (
-  <div className="w-50 d-flex">
-    <div className="col-md-9 bg-primary-400">
-      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="min-vh-100 d-flex align-items-center">
-        <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
-        <h1
-          className={classNames(
-            'display-2 text-white mw-xs',
-            { 'ml-6': getConfig().SITE_NAME !== 'edX' },
-          )}
-        >
-          {intl.formatMessage(messages['start.learning'])}
-          <div className="text-accent-a">
-            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-          </div>
-        </h1>
-      </div>
-    </div>
-    <div className="col-md-3 bg-white p-0">
-      <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-        <g transform="skewX(171.6)">
-          <rect x="0" y="0" height="100%" width="100%" />
-        </g>
-      </svg>
-    </div>
-  </div>
-);
-
-LargeLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(LargeLayout);

src/base-component/MediumLayout.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const MediumLayout = ({ intl }) => (
-  <>
-    <div className="w-100 medium-screen-top-stripe" />
-    <div className="w-100 p-0 mb-3 d-flex">
-      <div className="col-md-10 bg-primary-400">
-        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
-        </Hyperlink>
-        <div className="d-flex align-items-center justify-content-center mb-4 ">
-          <div className={classNames({ 'mt-1 medium-yellow-line': getConfig().SITE_NAME === 'edX' })} />
-          <div>
-            <h1
-              className={classNames(
-                'display-1 text-white mt-5 mb-5 mr-2',
-                { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
-              )}
-            >
-              <span className="mr-2">{intl.formatMessage(messages['start.learning'])}</span>
-              <span className="text-accent-a d-inline-block">
-                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-              </span>
-            </h1>
-          </div>
-        </div>
-      </div>
-      <div className="col-md-2 bg-white p-0">
-        <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(168)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
-    </div>
-  </>
-);
-
-MediumLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(MediumLayout);

src/base-component/SmallLayout.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
-import classNames from 'classnames';
-
-import messages from './messages';
-
-const SmallLayout = ({ intl }) => (
-  <span className="bg-primary-400 w-100">
-    <div className="col-md-12 small-screen-top-stripe" />
-    <div>
-      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
-      </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
-        <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
-        <h1
-          className={classNames(
-            'text-white mt-3.5 mb-3.5',
-            { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
-          )}
-        >
-          <span className="mr-1">{intl.formatMessage(messages['start.learning'])}</span>
-          <span className="text-accent-a d-inline-block">
-            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-          </span>
-        </h1>
-      </div>
-    </div>
-  </span>
-);
-
-SmallLayout.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(SmallLayout);

src/base-component/index.jsx

@@ -1 +0,0 @@
-export { default } from './BaseComponent';

src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -3,16 +3,14 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 
-import LargeLayout from '../LargeLayout';
-import MediumLayout from '../MediumLayout';
-import SmallLayout from '../SmallLayout';
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
 
-describe('ScreenLayout', () => {
-  it('should display the form, pass as a child in SmallScreenLayout', () => {
+describe('Default Layout tests', () => {
+  it('should display the form passed as a child in SmallScreenLayout', () => {
     const smallScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <SmallLayout />
+          <DefaultSmallLayout />
           <form>
             <input type="text" />
           </form>
@@ -22,11 +20,11 @@ describe('ScreenLayout', () => {
     expect(smallScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in MediumScreenLayout', () => {
+  it('should display the form passed as a child in MediumScreenLayout', () => {
     const mediumScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <MediumLayout />
+          <DefaultMediumLayout />
           <form>
             <input type="text" />
           </form>
@@ -36,11 +34,11 @@ describe('ScreenLayout', () => {
     expect(mediumScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in LargeScreenLayout', () => {
+  it('should display the form passed as a child in LargeScreenLayout', () => {
     const largeScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <LargeLayout />
+          <DefaultLargeLayout />
           <form>
             <input type="text" />
           </form>

src/base-container/components/default-layout/LargeLayout.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
+
+import messages from './messages';
+
+const LargeLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="w-50 d-flex">
+      <div className="col-md-9 bg-primary-400">
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="min-vh-100 d-flex align-items-center">
+          <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
+          <h1
+            className={classNames(
+              'display-2 text-white mw-xs',
+              { 'ml-6': getConfig().SITE_NAME !== 'edX' },
+            )}
+          >
+            {formatMessage(messages['start.learning'])}
+            <div className="text-accent-a">
+              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </div>
+          </h1>
+        </div>
+      </div>
+      <div className="col-md-3 bg-white p-0">
+        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
+          <g transform="skewX(171.6)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default LargeLayout;

src/base-container/components/default-layout/MediumLayout.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
+
+import messages from './messages';
+
+const MediumLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <div className="w-100 medium-screen-top-stripe" />
+      <div className="w-100 p-0 mb-3 d-flex">
+        <div className="col-md-10 bg-primary-400">
+          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+            <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
+          </Hyperlink>
+          <div className="d-flex align-items-center justify-content-center mb-4 ">
+            <div className={classNames({ 'mt-1 medium-yellow-line': getConfig().SITE_NAME === 'edX' })} />
+            <div>
+              <h1
+                className={classNames(
+                  'display-1 text-white mt-5 mb-5 mr-2',
+                  { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+                )}
+              >
+                <span className="mr-2">{formatMessage(messages['start.learning'])}</span>
+                <span className="text-accent-a d-inline-block">
+                  {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+                </span>
+              </h1>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-2 bg-white p-0">
+          <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
+            <g transform="skewX(168)">
+              <rect x="0" y="0" height="100%" width="100%" />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MediumLayout;

src/base-container/components/default-layout/SmallLayout.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
+
+import messages from './messages';
+
+const SmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span className="bg-primary-400 w-100">
+      <div className="col-md-12 small-screen-top-stripe" />
+      <div>
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+        </Hyperlink>
+        <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+          <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
+          <h1
+            className={classNames(
+              'text-white mt-3.5 mb-3.5',
+              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+            )}
+          >
+            <span className="mr-1">{formatMessage(messages['start.learning'])}</span>
+            <span className="text-accent-a d-inline-block">
+              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </span>
+          </h1>
+        </div>
+      </div>
+    </span>
+  );
+};
+
+export default SmallLayout;

src/base-container/components/default-layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as DefaultLargeLayout } from './LargeLayout';
+export { default as DefaultMediumLayout } from './MediumLayout';
+export { default as DefaultSmallLayout } from './SmallLayout';

src/base-container/components/default-layout/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'start.learning': {
+    id: 'start.learning',
+    defaultMessage: 'Start learning',
+    description: 'Header text for logistration MFE pages',
+  },
+  'with.site.name': {
+    id: 'with.site.name',
+    defaultMessage: 'with {siteName}',
+    description: 'Header text with site name for logistration MFE pages',
+  },
+});
+
+export default messages;

src/base-container/components/image-layout/ExtraSmallLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const ExtraSmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image extra-small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default ExtraSmallLayout;

src/base-container/components/image-layout/LargeLayout.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const LargeLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-50 bg-primary-500 banner__image large-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_LARGE})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="min-vh-100 p-5 d-flex align-items-end">
+        <h1 className="display-2 mw-sm mb-3 d-flex flex-column flex-shrink-0 justify-content-center">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default LargeLayout;

src/base-container/components/image-layout/MediumLayout.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const MediumLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_MEDIUM})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 pb-4 pt-4">
+        <h1 className="display-2 banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300 d-inline-block">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default MediumLayout;

src/base-container/components/image-layout/SmallLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const SmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="display-2">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default SmallLayout;

src/base-container/components/image-layout/index.jsx

@@ -0,0 +1,4 @@
+export { default as ImageLargeLayout } from './LargeLayout';
+export { default as ImageMediumLayout } from './MediumLayout';
+export { default as ImageSmallLayout } from './SmallLayout';
+export { default as ImageExtraSmallLayout } from './ExtraSmallLayout';

src/base-container/components/image-layout/index.scss

@@ -0,0 +1,37 @@
+.company-logo {
+  width: 71px;
+  margin-top: 2rem;
+  margin-left: 1.5rem;
+}
+
+@media (max-width: 576px) {
+  .company-logo {
+    width: 44.67px;
+    margin-top: 1.25rem;
+    margin-left: 1.5rem;
+  }
+}
+
+.banner__image {
+  background-size: cover;
+  background-repeat: no-repeat;
+  border:none;
+}
+
+@media (min-width: 464px) and (max-width: 575.98px) {
+  .banner__heading {
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 60px;
+    letter-spacing: -1.2px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 800px) {
+  .banner__heading {
+    font-size: 60px !important;
+    font-weight: 700 !important;
+    line-height: 60px !important;
+    letter-spacing: -2px !important;
+  }
+}

src/base-container/components/image-layout/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'your.career.turning.point': {
+    id: 'your.career.turning.point',
+    defaultMessage: 'Your career turning point',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+  'is.here': {
+    id: 'is.here',
+    defaultMessage: 'is here.',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+});
+
+export default messages;

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const LargeLayout = ({ username }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="w-50 d-flex">
+      <div className="col-md-10 bg-light-200 p-0">
+        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
+        </Hyperlink>
+        <div className="min-vh-100 d-flex align-items-center">
+          <div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
+          <div>
+            <h1 className="welcome-to-platform data-hj-suppress">
+              {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+            </h1>
+            <h2 className="complete-your-profile">
+              {formatMessage(messages['complete.your.profile.1'])}
+              <div className="text-accent-a">
+                {formatMessage(messages['complete.your.profile.2'])}
+              </div>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div className="col-md-2 bg-white p-0">
+        <svg className="m1-n1 w-100 h-100 large-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
+          <g transform="skewX(171.6)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+LargeLayout.propTypes = {
+  username: PropTypes.string.isRequired,
+};
+
+export default LargeLayout;

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const MediumLayout = ({ username }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <div className="w-100 medium-screen-top-stripe" />
+      <div className="w-100 p-0 mb-3 d-flex">
+        <div className="col-md-10 bg-light-200">
+          <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+            <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
+          </Hyperlink>
+          <div className="d-flex align-items-center justify-content-center mb-4 ml-5">
+            <div className="medium-yellow-line mt-5 mr-n2" />
+            <div>
+              <h1 className="h3 data-hj-suppress mw-320">
+                {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+              </h1>
+              <h2 className="display-1">
+                {formatMessage(messages['complete.your.profile.1'])}
+                <div className="text-accent-a">
+                  {formatMessage(messages['complete.your.profile.2'])}
+                </div>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="col-md-2 bg-white p-0">
+          <svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
+            <g transform="skewX(168)">
+              <rect x="0" y="0" height="100%" width="100%" />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </>
+  );
+};
+
+MediumLayout.propTypes = {
+  username: PropTypes.string.isRequired,
+};
+
+export default MediumLayout;

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const SmallLayout = ({ username }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="min-vw-100 bg-light-200">
+      <div className="col-md-12 small-screen-top-stripe" />
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
+      </Hyperlink>
+      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className="small-yellow-line mt-4.5" />
+        <div>
+          <h1 className="h5 data-hj-suppress">
+            {formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
+          </h1>
+          <h2 className="h1">
+            {formatMessage(messages['complete.your.profile.1'])}
+            <div className="text-accent-a">
+              {formatMessage(messages['complete.your.profile.2'])}
+            </div>
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SmallLayout.propTypes = {
+  username: PropTypes.string.isRequired,
+};
+
+export default SmallLayout;

src/base-container/components/welcome-page-layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as AuthLargeLayout } from './LargeLayout';
+export { default as AuthMediumLayout } from './MediumLayout';
+export { default as AuthSmallLayout } from './SmallLayout';

src/base-container/components/welcome-page-layout/messages.js

@@ -1,17 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
+  'welcome.to.platform': {
+    id: 'welcome.to.platform',
+    defaultMessage: 'Welcome to {siteName}, {username}!',
+    description: 'Welcome message that appears on progressive profile page',
   },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-  // authenticated user base component text
   'complete.your.profile.1': {
     id: 'complete.your.profile.1',
     defaultMessage: 'Complete',
@@ -22,11 +16,6 @@ const messages = defineMessages({
     defaultMessage: 'your profile',
     description: 'part of text "complete your profile"',
   },
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
-    description: 'Welcome message that appears on progressive profile page',
-  },
 });
 
 export default messages;

src/base-container/data/constants.js

@@ -0,0 +1,4 @@
+const IMAGE_LAYOUT = 'image-layout';
+const DEFAULT_LAYOUT = 'default-layout';
+
+export { DEFAULT_LAYOUT, IMAGE_LAYOUT };

src/base-container/index.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { breakpoints } from '@edx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';
+import {
+  ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
+} from './components/image-layout';
+import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
+import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';
+
+const BaseContainer = ({ children, showWelcomeBanner }) => {
+  const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
+  const username = authenticatedUser ? authenticatedUser.username : null;
+
+  const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);
+
+  useEffect(() => {
+    const initRebrandExperiment = () => {
+      if (window.experiments?.rebrandExperiment) {
+        setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+      } else {
+        window.experiments = window.experiments || {};
+        window.experiments.rebrandExperiment = {};
+        window.experiments.rebrandExperiment.handleLoaded = () => {
+          setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+        };
+      }
+    };
+    initRebrandExperiment();
+  }, []);
+
+  if (baseContainerVersion === IMAGE_LAYOUT) {
+    return (
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {authenticatedUser ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {authenticatedUser ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="col-md-12 extra-large-screen-top-stripe" />
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
+          {authenticatedUser ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {authenticatedUser ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {authenticatedUser ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+BaseContainer.defaultProps = {
+  showWelcomeBanner: false,
+};
+
+BaseContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  showWelcomeBanner: PropTypes.bool,
+};
+
+export default BaseContainer;

src/base-container/tests/BaseContainer.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { mount } from 'enzyme';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import BaseContainer from '../index';
+
+const LargeScreen = {
+  wrappingComponent: ResponsiveContext.Provider,
+  wrappingComponentProps: { value: { width: 1200 } },
+};
+
+describe('Base component tests', () => {
+  it('should should default layout', () => {
+    const baseContainer = mount(
+      <IntlProvider locale="en">
+        <BaseContainer />
+      </IntlProvider>,
+      LargeScreen,
+    );
+
+    expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
+    expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
+  });
+
+  it('[experiment] should show image layout for treatment group', () => {
+    window.experiments = {
+      rebrandExperiment: {
+        variation: 'image-layout',
+      },
+    };
+
+    const baseContainer = mount(
+      <IntlProvider locale="en">
+        <BaseContainer />
+      </IntlProvider>,
+      LargeScreen,
+    );
+
+    expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
+  });
+});

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+
+import { PAGE_NOT_FOUND } from '../data/constants';
+import { isHostAvailableInQueryParams } from '../data/utils';
+
+/**
+ * This wrapper redirects the requester to embedded register page only if host
+ * query param is present.
+ */
+const EmbeddedRegistrationRoute = ({ children }) => {
+  const registrationEmbedded = isHostAvailableInQueryParams();
+
+  // Show registration page for embedded experience even if the user is authenticated
+  if (registrationEmbedded) {
+    return children;
+  }
+
+  return <Navigate to={PAGE_NOT_FOUND} replace />;
+};
+
+EmbeddedRegistrationRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default EmbeddedRegistrationRoute;

src/common-components/EnterpriseSSO.jsx

@@ -1,19 +1,23 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Form,
+  Icon,
 } from '@edx/paragon';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
+import { Login } from '@edx/paragon/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
+/**
+ * This component renders the Single sign-on (SSO) button only for the tpa provider passed
+ * */
 const EnterpriseSSO = (props) => {
-  const { intl } = props;
+  const { formatMessage } = useIntl();
   const tpaProvider = props.provider;
   const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
 
@@ -33,7 +37,7 @@ const EnterpriseSSO = (props) => {
         <div className="d-flex flex-column">
           <div className="mw-450">
             <Form className="m-0">
-              <p>{intl.formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
+              <p>{formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
               <Button
                 id={tpaProvider.id}
                 key={tpaProvider.id}
@@ -44,16 +48,18 @@ const EnterpriseSSO = (props) => {
               >
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
-                    <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
+                    <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
                     <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                   </div>
                 )
                   : (
                     <>
-                      <div className="font-container" aria-hidden="true">
-                        <FontAwesomeIcon
-                          icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
-                        />
+                      <div className="btn-tpa__font-container" aria-hidden="true">
+                        {SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? (
+                          <FontAwesomeIcon icon={['fab', tpaProvider.iconClass]} />)
+                          : (
+                            <Icon className="h-75" src={Login} />
+                          )}
                       </div>
                       <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                     </>
@@ -69,8 +75,8 @@ const EnterpriseSSO = (props) => {
                 onClick={(e) => handleClick(e)}
               >
                 {disablePublicAccountCreation
-                  ? intl.formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
-                  : intl.formatMessage(messages['enterprisetpa.login.button.text'])}
+                  ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
+                  : formatMessage(messages['enterprisetpa.login.button.text'])}
               </Button>
             </Form>
           </div>
@@ -101,7 +107,6 @@ EnterpriseSSO.propTypes = {
     loginUrl: PropTypes.string,
     registerUrl: PropTypes.string,
   }),
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EnterpriseSSO);
+export default EnterpriseSSO;

src/common-components/FormGroup.jsx

@@ -27,7 +27,7 @@ const FormGroup = (props) => {
         readOnly={props.readOnly}
         type={props.type}
         aria-invalid={props.errorMessage !== ''}
-        className="form-field"
+        className="form-group__form-field"
         autoComplete={props.autoComplete}
         spellCheck={props.spellCheck}
         name={props.name}
@@ -37,7 +37,6 @@ const FormGroup = (props) => {
         onClick={handleClick}
         onChange={props.handleChange}
         controlClassName={props.borderClass}
-
         trailingElement={props.trailingElement}
         floatingLabel={props.floatingLabel}
       >

src/common-components/InstitutionLogistration.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink, Icon } from '@edx/paragon';
 import { Institution } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
+/**
+ * This component renders the Institution login button
+ * */
 export const RenderInstitutionButton = props => {
   const { onSubmitHandler, buttonTitle } = props;
 
@@ -24,10 +27,13 @@ export const RenderInstitutionButton = props => {
   );
 };
 
+/**
+ * This component renders the page list of available institutions for login
+ * */
 const InstitutionLogistration = props => {
   const lmsBaseUrl = getConfig().LMS_BASE_URL;
+  const { formatMessage } = useIntl();
   const {
-    intl,
     secondaryProviders,
     headingTitle,
   } = props;
@@ -36,11 +42,11 @@ const InstitutionLogistration = props => {
     <>
       <div className="d-flex justify-content-left mb-4 mt-2">
         <div className="flex-column">
-          <h4 className="mb-2 font-weight-bold institute-heading">
+          <h4 className="mb-2 font-weight-bold institutions__heading">
             {headingTitle}
           </h4>
           <p className="mb-2">
-            {intl.formatMessage(messages['institution.login.page.sub.heading'])}
+            {formatMessage(messages['institution.login.page.sub.heading'])}
           </p>
         </div>
       </div>
@@ -51,7 +57,7 @@ const InstitutionLogistration = props => {
               <tr key={provider} className="pgn__data-table-row">
                 <td>
                   <Hyperlink
-                    className="btn nav-item p-0 mb-1 secondary-provider-link"
+                    className="btn nav-item p-0 mb-1 institutions--provider-link"
                     destination={lmsBaseUrl + provider.loginUrl}
                   >
                     {provider.name}
@@ -89,7 +95,6 @@ RenderInstitutionButton.defaultProps = {
 
 InstitutionLogistration.propTypes = {
   ...LogistrationProps,
-  intl: intlShape.isRequired,
   headingTitle: PropTypes.string,
 };
 InstitutionLogistration.defaultProps = {
@@ -97,4 +102,4 @@ InstitutionLogistration.defaultProps = {
   headingTitle: '',
 };
 
-export default injectIntl(InstitutionLogistration);
+export default InstitutionLogistration;

src/common-components/NotFoundPage.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function NotFoundPage() {
-  return (
-    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-      <p className="my-0 py-5 text-muted mw-32em">
-        <FormattedMessage
-          id="error.notfound.message"
-          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-          description="error message when a page does not exist"
-        />
-      </p>
-    </div>
-  );
-}
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted mw-32em">
+      <FormattedMessage
+        id="error.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;

src/common-components/PasswordField.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
 } from '@edx/paragon';
@@ -9,33 +10,80 @@ import {
 } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
 import messages from './messages';
+import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { clearRegistertionBackendError, fetchRealtimeValidations } from '../register/data/actions';
+import { PASSWORD_FIELD_LABEL } from '../register/data/constants';
+import { validatePasswordField } from '../register/data/utils';
 
 const PasswordField = (props) => {
-  const { formatMessage } = props.intl;
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+
+  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
   const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
   const [showTooltip, setShowTooltip] = useState(false);
 
   const handleBlur = (e) => {
+    if (e.target?.name === PASSWORD_FIELD_LABEL && e.relatedTarget?.name === 'passwordIcon') {
+      return; // resolving a bug where validations get run on password icon focus
+    }
+
     if (props.handleBlur) { props.handleBlur(e); }
     setShowTooltip(props.showRequirements && false);
+    if (props.handleErrorChange) { // If rendering from register page
+      const fieldError = validatePasswordField(props.value, formatMessage);
+      if (fieldError) {
+        props.handleErrorChange(PASSWORD_FIELD_LABEL, fieldError);
+      } else if (!validationApiRateLimited) {
+        dispatch(fetchRealtimeValidations({ [PASSWORD_FIELD_LABEL]: props.value }));
+      }
+    }
   };
 
   const handleFocus = (e) => {
+    if (e.target?.name === 'passwordIcon') {
+      return; // resolving a bug where error gets cleared on password icon focus
+    }
+
     if (props.handleFocus) {
       props.handleFocus(e);
     }
+    if (props.handleErrorChange) {
+      props.handleErrorChange(PASSWORD_FIELD_LABEL, '');
+      dispatch(clearRegistertionBackendError(PASSWORD_FIELD_LABEL));
+    }
     setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
   };
 
   const HideButton = (
-    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={VisibilityOff}
+      iconAs={Icon}
+      onClick={setHiddenTrue}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['hide.password'])}
+    />
   );
 
   const ShowButton = (
-    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="passwordValidation" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={Visibility}
+      iconAs={Icon}
+      onClick={setHiddenFalse}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['show.password'])}
+    />
   );
+
   const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (
     <Tooltip id={`password-requirement-${placement}`}>
@@ -59,7 +107,7 @@ const PasswordField = (props) => {
       <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
         <Form.Control
           as="input"
-          className="form-field"
+          className="form-group__form-field"
           type={isPasswordHidden ? 'password' : 'text'}
           name={props.name}
           value={props.value}
@@ -89,6 +137,7 @@ PasswordField.defaultProps = {
   handleBlur: null,
   handleFocus: null,
   handleChange: () => {},
+  handleErrorChange: null,
   showRequirements: true,
   autoComplete: null,
 };
@@ -100,11 +149,11 @@ PasswordField.propTypes = {
   handleBlur: PropTypes.func,
   handleFocus: PropTypes.func,
   handleChange: PropTypes.func,
-  intl: intlShape.isRequired,
+  handleErrorChange: PropTypes.func,
   name: PropTypes.string.isRequired,
   showRequirements: PropTypes.bool,
   value: PropTypes.string.isRequired,
   autoComplete: PropTypes.string,
 };
 
-export default injectIntl(PasswordField);
+export default PasswordField;

src/common-components/RedirectLogistration.jsx

@@ -1,15 +1,22 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
-import { WELCOME_PAGE } from '../data/constants';
+import {
+  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS,
+} from '../data/constants';
 import { setCookie } from '../data/utils';
 
-function RedirectLogistration(props) {
+const RedirectLogistration = (props) => {
   const {
-    finishAuthUrl, redirectUrl, redirectToWelcomePage, success, optionalFields,
+    finishAuthUrl,
+    redirectUrl,
+    redirectToProgressiveProfilingPage,
+    success,
+    optionalFields,
+    redirectToRecommendationsPage,
+    educationLevel,
+    userId,
   } = props;
   let finalRedirectUrl = '';
 
@@ -24,42 +31,66 @@ function RedirectLogistration(props) {
       finalRedirectUrl = redirectUrl;
     }
 
-    if (redirectToWelcomePage) {
+    // Redirect to Progressive Profiling after successful registration
+    if (redirectToProgressiveProfilingPage) {
+      // TODO: Do we still need this cookie?
       setCookie('van-504-returning-user', true);
-      // use this component to redirect WelcomePage after successful registration
-      // return <Redirect to={WELCOME_PAGE} />;
+
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: WELCOME_PAGE,
-          state: {
+        <Navigate
+          to={AUTHN_PROGRESSIVE_PROFILING}
+          state={{
             registrationResult,
             optionalFields,
-          },
-        }}
+          }}
+          replace
+        />
+      );
+    }
+
+    // Redirect to Recommendation page
+    if (redirectToRecommendationsPage) {
+      const registrationResult = { redirectUrl: finalRedirectUrl, success };
+      return (
+        <Navigate
+          to={RECOMMENDATIONS}
+          state={{
+            registrationResult,
+            educationLevel,
+            userId,
+          }}
+          replace
         />
       );
     }
 
     window.location.href = finalRedirectUrl;
   }
-  return <></>;
-}
+
+  return null;
+};
 
 RedirectLogistration.defaultProps = {
+  educationLevel: null,
   finishAuthUrl: null,
   success: false,
   redirectUrl: '',
-  redirectToWelcomePage: false,
+  redirectToProgressiveProfilingPage: false,
   optionalFields: {},
+  redirectToRecommendationsPage: false,
+  userId: null,
 };
 
 RedirectLogistration.propTypes = {
+  educationLevel: PropTypes.string,
   finishAuthUrl: PropTypes.string,
   success: PropTypes.bool,
   redirectUrl: PropTypes.string,
-  redirectToWelcomePage: PropTypes.bool,
+  redirectToProgressiveProfilingPage: PropTypes.bool,
   optionalFields: PropTypes.shape({}),
+  redirectToRecommendationsPage: PropTypes.bool,
+  userId: PropTypes.number,
 };
 
 export default RedirectLogistration;

src/common-components/SocialAuthProviders.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { Login } from '@edx/paragon/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 
-function SocialAuthProviders(props) {
-  const { intl, referrer, socialAuthProviders } = props;
+const SocialAuthProviders = (props) => {
+  const { formatMessage } = useIntl();
+  const { referrer, socialAuthProviders } = props;
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -30,29 +32,30 @@ function SocialAuthProviders(props) {
     >
       {provider.iconImage ? (
         <div aria-hidden="true">
-          <img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
+          <img className="btn-tpa__image-icon" src={provider.iconImage} alt={`icon ${provider.name}`} />
         </div>
       )
         : (
-          <>
-            <div className="font-container" aria-hidden="true">
-              <FontAwesomeIcon
-                icon={SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? ['fab', provider.iconClass] : faSignInAlt}
-              />
-            </div>
-          </>
+          <div className="btn-tpa__font-container" aria-hidden="true">
+            {SUPPORTED_ICON_CLASSES.includes(provider.iconClass) ? (
+              <FontAwesomeIcon icon={['fab', provider.iconClass]} />)
+              : (
+                <Icon className="h-75" src={Login} />
+              )}
+          </div>
         )}
       <span id="provider-name" className="notranslate mr-auto pl-2" aria-hidden="true">{provider.name}</span>
       <span className="sr-only">
         {referrer === LOGIN_PAGE
-          ? intl.formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
-          : intl.formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
+          ? formatMessage(messages['sso.sign.in.with'], { providerName: provider.name })
+          : formatMessage(messages['sso.create.account.using'], { providerName: provider.name })}
       </span>
     </button>
   ));
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{socialAuth}</>;
-}
+};
 
 SocialAuthProviders.defaultProps = {
   referrer: LOGIN_PAGE,
@@ -60,7 +63,6 @@ SocialAuthProviders.defaultProps = {
 };
 
 SocialAuthProviders.propTypes = {
-  intl: intlShape.isRequired,
   referrer: PropTypes.string,
   socialAuthProviders: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -69,7 +71,8 @@ SocialAuthProviders.propTypes = {
     iconImage: PropTypes.string,
     loginUrl: PropTypes.string,
     registerUrl: PropTypes.string,
+    skipRegistrationForm: PropTypes.bool,
   })),
 };
 
-export default injectIntl(SocialAuthProviders);
+export default SocialAuthProviders;

src/common-components/SwitchContent.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import { TransitionReplace } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-const onChildExit = (htmlNode) => {
-  // If the leaving child has focus, take control and redirect it
-  if (htmlNode.contains(document.activeElement)) {
-    // Get the newly entering sibling.
-    // It's the previousSibling, but not for any explicit reason. So checking for both.
-    const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;
-
-    // There's no replacement, do nothing.
-    if (!enteringChild) return; // eslint-disable-line curly
-
-    // Get all the focusable elements in the entering child and focus the first one
-    const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    if (focusableElements.length) {
-      focusableElements[0].focus();
-    }
-  }
-};
-
-function SwitchContent({ expression, cases, className }) {
-  const getContent = (caseKey) => {
-    if (cases[caseKey]) {
-      if (typeof cases[caseKey] === 'string') {
-        return getContent(cases[caseKey]);
-      }
-      return React.cloneElement(cases[caseKey], { key: caseKey });
-    } else if (cases.default) { // eslint-disable-line no-else-return
-      if (typeof cases.default === 'string') {
-        return getContent(cases.default);
-      }
-      React.cloneElement(cases.default, { key: 'default' });
-    }
-
-    return null;
-  };
-
-  return (
-    <TransitionReplace
-      className={className}
-      onChildExit={onChildExit}
-    >
-      {getContent(expression)}
-    </TransitionReplace>
-  );
-}
-
-SwitchContent.propTypes = {
-  expression: PropTypes.string,
-  cases: PropTypes.objectOf(PropTypes.node).isRequired,
-  className: PropTypes.string,
-};
-
-SwitchContent.defaultProps = {
-  expression: null,
-  className: null,
-};
-
-export default SwitchContent;

src/common-components/ThirdPartyAuthAlert.jsx

@@ -1,42 +1,52 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import messages from './messages';
+import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 
 const ThirdPartyAuthAlert = (props) => {
-  const { currentProvider, intl, referrer } = props;
+  const { formatMessage } = useIntl();
+  const { currentProvider, referrer } = props;
   const platformName = getConfig().SITE_NAME;
   let message;
 
   if (referrer === LOGIN_PAGE) {
-    message = intl.formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
+    message = formatMessage(messages['login.third.party.auth.account.not.linked'], { currentProvider, platformName });
   } else {
-    message = intl.formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
+    message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
+  }
+
+  if (!currentProvider) {
+    return null;
   }
 
   return (
-    <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2' : 'alert-warning mt-n2'}>
+    <>
+      <Alert id="tpa-alert" className={referrer === REGISTER_PAGE ? 'alert-success mt-n2 mb-5' : 'alert-warning mt-n2 mb-5'}>
+        {referrer === REGISTER_PAGE ? (
+          <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
+        ) : null}
+        <p>{ message }</p>
+      </Alert>
       {referrer === REGISTER_PAGE ? (
-        <Alert.Heading>{intl.formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
+        <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>
       ) : null}
-      <p>{ message }</p>
-    </Alert>
+    </>
   );
 };
 
 ThirdPartyAuthAlert.defaultProps = {
+  currentProvider: '',
   referrer: LOGIN_PAGE,
 };
 
 ThirdPartyAuthAlert.propTypes = {
-  currentProvider: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
+  currentProvider: PropTypes.string,
   referrer: PropTypes.string,
 };
 
-export default injectIntl(ThirdPartyAuthAlert);
+export default ThirdPartyAuthAlert;

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
+import {
+  DEFAULT_REDIRECT_URL,
+} from '../data/constants';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
  * already authenticated.
  */
-const UnAuthOnlyRoute = (props) => {
+const UnAuthOnlyRoute = ({ children }) => {
   const [authUser, setAuthUser] = useState({});
   const [isReady, setIsReady] = useState(false);
 
@@ -27,10 +29,14 @@ const UnAuthOnlyRoute = (props) => {
       return null;
     }
 
-    return <Route {...props} />;
+    return children;
   }
 
-  return <></>;
+  return null;
+};
+
+UnAuthOnlyRoute.propTypes = {
+  children: PropTypes.node.isRequired,
 };
 
 export default UnAuthOnlyRoute;

src/common-components/Zendesk.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import Zendesk from 'react-zendesk';
+
+import messages from './messages';
+import { REGISTER_EMBEDDED_PAGE } from '../data/constants';
+
+const ZendeskHelp = () => {
+  const { formatMessage } = useIntl();
+  const setting = {
+    cookies: true,
+    webWidget: {
+      contactOptions: {
+        enabled: false,
+      },
+      chat: {
+        suppress: false,
+        departments: {
+          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
+        },
+      },
+      contactForm: {
+        ticketForms: [
+          {
+            id: 360003368814,
+            subject: false,
+            fields: [{ id: 'description', prefill: { '*': '' } }],
+          },
+        ],
+        selectTicketForm: {
+          '*': formatMessage(messages.selectTicketForm),
+        },
+        attachments: true,
+      },
+      helpCenter: {
+        originalArticleButton: true,
+      },
+      answerBot: {
+        suppress: false,
+        contactOnlyAfterQuery: true,
+        title: { '*': formatMessage(messages.supportTitle) },
+        avatar: {
+          url: getConfig().ZENDESK_LOGO_URL,
+          name: { '*': formatMessage(messages.supportTitle) },
+        },
+      },
+    },
+  };
+
+  if (window.location.pathname === REGISTER_EMBEDDED_PAGE) {
+    return null;
+  }
+
+  return (
+    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
+  );
+};
+
+export default ZendeskHelp;

src/common-components/data/actions.js

@@ -1,6 +1,7 @@
 import { AsyncActionType } from '../../data/utils';
 
 export const THIRD_PARTY_AUTH_CONTEXT = new AsyncActionType('THIRD_PARTY_AUTH', 'GET_THIRD_PARTY_AUTH_CONTEXT');
+export const THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG = 'THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG';
 
 // Third party auth context
 export const getThirdPartyAuthContext = (urlParams) => ({
@@ -20,3 +21,7 @@ export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalField
 export const getThirdPartyAuthContextFailure = () => ({
   type: THIRD_PARTY_AUTH_CONTEXT.FAILURE,
 });
+
+export const clearThirdPartyAuthContextErrorMessage = () => ({
+  type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
+});

src/common-components/data/reducers.js

@@ -1,33 +1,58 @@
-import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
-import { THIRD_PARTY_AUTH_CONTEXT } from './actions';
+import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
+import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
 
 export const defaultState = {
-  extendedProfile: [],
   fieldDescriptions: {},
-  optionalFields: {},
+  optionalFields: {
+    fields: {},
+    extended_profile: [],
+  },
   thirdPartyAuthApiStatus: null,
+  thirdPartyAuthContext: {
+    currentProvider: null,
+    finishAuthUrl: null,
+    countryCode: null,
+    providers: [],
+    secondaryProviders: [],
+    pipelineUserDetails: null,
+    errorMessage: null,
+    welcomePageRedirectUrl: null,
+  },
 };
 
-const reducer = (state = defaultState, action) => {
+const reducer = (state = defaultState, action = {}) => {
   switch (action.type) {
     case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
       return {
         ...state,
         thirdPartyAuthApiStatus: PENDING_STATE,
       };
-    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS:
+    case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
       return {
         ...state,
-        extendedProfile: action.payload.fieldDescriptions.extendedProfile,
         fieldDescriptions: action.payload.fieldDescriptions.fields,
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
       };
+    }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
       return {
         ...state,
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
+        thirdPartyAuthApiStatus: FAILURE_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
+      };
+    case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
+      return {
+        ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
       };
     default:
       return state;

src/common-components/data/sagas.js

@@ -1,7 +1,6 @@
 import { logError } from '@edx/frontend-platform/logging';
 import { call, put, takeEvery } from 'redux-saga/effects';
 
-import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 import {
   getThirdPartyAuthContextBegin,
   getThirdPartyAuthContextFailure,
@@ -11,18 +10,17 @@ import {
 import {
   getThirdPartyAuthContext,
 } from './service';
+import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 
 export function* fetchThirdPartyAuthContext(action) {
   try {
     yield put(getThirdPartyAuthContextBegin());
-    const { fieldDescriptions, optionalFields, thirdPartyAuthContext } = yield call(
-      getThirdPartyAuthContext, action.payload.urlParams,
-    );
+    const {
+      fieldDescriptions, optionalFields, thirdPartyAuthContext,
+    } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(
-      fieldDescriptions, optionalFields, thirdPartyAuthContext,
-    ));
+    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/data/selectors.js

@@ -14,12 +14,15 @@ export const fieldDescriptionSelector = createSelector(
   commonComponents => commonComponents.fieldDescriptions,
 );
 
-export const extendedProfileSelector = createSelector(
-  commonComponentsSelector,
-  commonComponents => commonComponents.extendedProfile,
-);
-
 export const optionalFieldsSelector = createSelector(
   commonComponentsSelector,
   commonComponents => commonComponents.optionalFields,
 );
+
+export const tpaProvidersSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => ({
+    providers: commonComponents.thirdPartyAuthContext.providers,
+    secondaryProviders: commonComponents.thirdPartyAuthContext.secondaryProviders,
+  }),
+);

src/common-components/data/service.js

@@ -1,4 +1,4 @@
-import { camelCaseObject, convertKeyNames, getConfig } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -18,12 +18,8 @@ export async function getThirdPartyAuthContext(urlParams) {
       throw (e);
     });
   return {
-    fieldDescriptions: data.registration_fields || {},
-    optionalFields: data.optional_fields || {},
-    // For backward compatibility with the API, once https://github.com/openedx/edx-platform/pull/30198 is merged
-    // and deployed update it to use data.context_data
-    thirdPartyAuthContext: camelCaseObject(
-      convertKeyNames(data.context_data || data, { fullname: 'name' }),
-    ),
+    fieldDescriptions: data.registrationFields || {},
+    optionalFields: data.optionalFields || {},
+    thirdPartyAuthContext: data.contextData || {},
   };
 }

src/common-components/data/tests/reducer.test.js

@@ -0,0 +1,82 @@
+import { PENDING_STATE } from '../../../data/constants';
+import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from '../actions';
+import reducer from '../reducers';
+
+describe('common components reducer', () => {
+  it('test mfe context response', () => {
+    const state = {
+      fieldDescriptions: {},
+      optionalFields: {},
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext: {
+        currentProvider: null,
+        finishAuthUrl: null,
+        countryCode: null,
+        providers: [],
+        secondaryProviders: [],
+        pipelineUserDetails: null,
+        errorMessage: null,
+      },
+    };
+    const fieldDescriptions = {
+      fields: [],
+    };
+    const optionalFields = {
+      fields: [],
+      extended_profile: {},
+    };
+    const thirdPartyAuthContext = { ...state.thirdPartyAuthContext };
+    const action = {
+      type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
+      payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+    };
+
+    expect(
+      reducer(state, action),
+    ).toEqual(
+      {
+        ...state,
+        fieldDescriptions: [],
+        optionalFields: {
+          fields: [],
+          extended_profile: {},
+        },
+        thirdPartyAuthApiStatus: 'complete',
+      },
+    );
+  });
+
+  it('should clear tpa context error message', () => {
+    const state = {
+      fieldDescriptions: {},
+      optionalFields: {},
+      thirdPartyAuthApiStatus: null,
+      thirdPartyAuthContext: {
+        currentProvider: null,
+        finishAuthUrl: null,
+        countryCode: null,
+        providers: [],
+        secondaryProviders: [],
+        pipelineUserDetails: null,
+        errorMessage: 'An error occured',
+      },
+    };
+
+    const action = {
+      type: THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG,
+    };
+
+    expect(
+      reducer(state, action),
+    ).toEqual(
+      {
+        ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
+      },
+    );
+  });
+});

src/common-components/index.jsx

@@ -1,5 +1,6 @@
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
+export { default as EmbeddedRegistrationRoute } from './EmbeddedRegistrationRoute';
 export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
@@ -11,4 +12,4 @@ export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';
 export { default as FormGroup } from './FormGroup';
 export { default as PasswordField } from './PasswordField';
-export { default as Logistration } from './Logistration';
+export { default as Zendesk } from './Zendesk';

src/common-components/messages.jsx

@@ -1,29 +1,13 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  // institution login strings
   'institution.login.page.sub.heading': {
     id: 'institution.login.page.sub.heading',
     defaultMessage: 'Choose your institution from the list below',
     description: 'Heading of the institutions list',
   },
-  // Confirmation Alert Message
-  'forgot.password.confirmation.title': {
-    id: 'forgot.password.confirmation.title',
-    defaultMessage: 'Check your email',
-    description: 'Forgot password confirmation message title',
-  },
-  'forgot.password.confirmation.support.link': {
-    id: 'forgot.password.confirmation.support.link',
-    defaultMessage: 'contact technical support',
-    description: 'Technical support link text',
-  },
-  'forgot.password.confirmation.info': {
-    id: 'forgot.password.confirmation.info',
-    defaultMessage: 'If you do not receive a password reset message after 1 minute, verify that you entered the correct '
-                    + 'email address, or check your spam folder.',
-    description: 'Part of message that appears after user requests password change',
-  },
-  // Logistration strinsg
+  // logistration strings
   'logistration.sign.in': {
     id: 'logistration.sign.in',
     defaultMessage: 'Sign in',
@@ -34,27 +18,12 @@ const messages = defineMessages({
     defaultMessage: 'Register',
     description: 'Text that appears on the tab to switch between login and register',
   },
-  'internal.server.error.message': {
-    id: 'internal.server.error.message',
-    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
-    description: 'Error message that appears when server responds with 500 error code',
-  },
-  'server.ratelimit.error.message': {
-    id: 'server.ratelimit.error.message',
-    defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',
-    description: 'Error message that appears when server responds with 429 error code',
-  },
   // enterprise sso strings
   'enterprisetpa.title.heading': {
     id: 'enterprisetpa.title.heading',
     defaultMessage: 'Would you like to sign in using your {providerName} credentials?',
     description: 'Header text used in enterprise third party authentication',
   },
-  'enterprisetpa.sso.button.title': {
-    id: 'enterprisetpa.sso.button.title',
-    defaultMessage: 'Sign in using {providerName}',
-    description: 'Text for third party auth provider buttons',
-  },
   'enterprisetpa.login.button.text': {
     id: 'enterprisetpa.login.button.text',
     defaultMessage: 'Show me other ways to sign in or register',
@@ -128,6 +97,21 @@ const messages = defineMessages({
     description: 'Message that appears on register page if user has successfully authenticated with TPA '
                   + 'but no associated platform account exists',
   },
+  'registration.using.tpa.form.heading': {
+    id: 'registration.using.tpa.form.heading',
+    defaultMessage: 'Finish creating your account',
+    description: 'Heading that appears above form when user is trying to create account using social auth',
+  },
+  supportTitle: {
+    id: 'zendesk.supportTitle',
+    description: 'Title for the support button',
+    defaultMessage: 'edX Support',
+  },
+  selectTicketForm: {
+    id: 'zendesk.selectTicketForm',
+    description: 'Select ticket form',
+    defaultMessage: 'Please choose your request type:',
+  },
 });
 
 export default messages;

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -0,0 +1,72 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import { REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+const RRD = require('react-router-dom');
+// Just render plain div with its children
+// eslint-disable-next-line react/prop-types
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+module.exports = RRD;
+
+const TestApp = () => (
+  <Router>
+    <div>
+      <Routes>
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
+        />
+      </Routes>
+    </div>
+  </Router>
+);
+
+describe('EmbeddedRegistrationRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[REGISTER_EMBEDDED_PAGE]}>
+      <TestApp />
+    </MemoryRouter>
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should not render embedded register page if host query param is not available in the url', async () => {
+    let embeddedRegistrationPage = null;
+
+    await act(async () => {
+      embeddedRegistrationPage = await mount(routerWrapper());
+    });
+
+    expect(embeddedRegistrationPage.find('span').exists()).toBeFalsy();
+  });
+
+  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
+    delete window.location;
+    window.location = {
+      href: getConfig().BASE_URL.concat(REGISTER_EMBEDDED_PAGE),
+      search: '?host=http://localhost/host-websit',
+    };
+
+    let embeddedRegistrationPage = null;
+
+    await act(async () => {
+      embeddedRegistrationPage = await mount(routerWrapper());
+    });
+
+    expect(embeddedRegistrationPage.find('span').exists()).toBeTruthy();
+    expect(embeddedRegistrationPage.find('span').text()).toBe('Embedded Register Page');
+  });
+});

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -1,13 +1,22 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable react/function-component-definition */
 import React from 'react';
 
-import * as auth from '@edx/frontend-platform/auth';
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { mount } from 'enzyme';
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
 
 import { UnAuthOnlyRoute } from '..';
-import { LOGIN_PAGE } from '../../data/constants';
+import { REGISTER_PAGE } from '../../data/constants';
 
-jest.mock('@edx/frontend-platform/auth');
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(),
+  fetchAuthenticatedUser: jest.fn(),
+}));
 
 const RRD = require('react-router-dom');
 // Just render plain div with its children
@@ -18,16 +27,16 @@ module.exports = RRD;
 const TestApp = () => (
   <Router>
     <div>
-      <Switch>
-        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
-      </Switch>
+      <Routes>
+        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+      </Routes>
     </div>
   </Router>
 );
 
 describe('UnAuthOnlyRoute', () => {
   const routerWrapper = () => (
-    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
+    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
       <TestApp />
     </MemoryRouter>
   );
@@ -36,25 +45,30 @@ describe('UnAuthOnlyRoute', () => {
     jest.clearAllMocks();
   });
 
-  it('should have called with forceRefresh true', () => {
+  it('should have called with forceRefresh true', async () => {
     const user = {
       username: 'gonzo',
       other: 'data',
     };
-    auth.getAuthenticatedUser = jest.fn(() => user);
-    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));
 
-    mount(routerWrapper());
+    getAuthenticatedUser.mockReturnValue(user);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
 
-    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
+    await act(async () => {
+      await mount(routerWrapper());
+    });
+
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
   });
 
-  it('should have called with forceRefresh false', () => {
-    auth.getAuthenticatedUser = jest.fn(() => null);
-    auth.fetchAuthenticatedUser = jest.fn(() => ({ then: () => auth.getAuthenticatedUser() }));
+  it('should have called with forceRefresh false', async () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
 
-    mount(routerWrapper());
+    await act(async () => {
+      await mount(routerWrapper());
+    });
 
-    expect(auth.fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
+    expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });
   });
 });

src/common-components/tests/Zendesk.test.jsx

@@ -0,0 +1,17 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import renderer from 'react-test-renderer';
+
+import Zendesk from '../Zendesk';
+
+jest.mock('react-zendesk', () => 'Zendesk');
+
+describe('Zendesk Help', () => {
+  it('should match login page third party auth alert message snapshot', () => {
+    const tree = renderer.create(
+      <IntlProvider locale="en">
+        <Zendesk />
+      </IntlProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -10,25 +10,27 @@ exports[`SocialAuthProviders should match social auth provider with default icon
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-right-to-bracket "
-      data-icon="right-to-bracket"
-      data-prefix="fas"
-      focusable="false"
-      role="img"
-      style={Object {}}
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      className="pgn__icon h-75"
     >
-      <path
-        d="M352 96h64c17.7 0 32 14.3 32 32V384c0 17.7-14.3 32-32 32H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96H352c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H160v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z"
-        fill="currentColor"
-        style={Object {}}
-      />
-    </svg>
+      <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="M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
   </div>
   <span
     aria-hidden="true"
@@ -55,7 +57,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 >
   <div
     aria-hidden="true"
-    className="font-container"
+    className="btn-tpa__font-container"
   >
     <svg
       aria-hidden="true"
@@ -104,7 +106,7 @@ Array [
     >
       <img
         alt="icon Apple"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/logo.png"
       />
     </div>
@@ -133,7 +135,7 @@ Array [
     >
       <img
         alt="icon Facebook"
-        className="icon-image"
+        className="btn-tpa__image-icon"
         src="https://edx.devstack.lms/facebook-logo.png"
       />
     </div>

src/common-components/tests/__snapshots__/ThirdPartyAuthAlert.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ThirdPartyAuthAlert should match login page third party auth alert message snapshot 1`] = `
 <div
-  className="fade alert-content alert-warning mt-n2 alert show"
+  className="fade alert-content alert-warning mt-n2 mb-5 alert show"
   id="tpa-alert"
   role="alert"
 >
@@ -21,26 +21,33 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
 `;
 
 exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-<div
-  className="fade alert-content alert-success mt-n2 alert show"
-  id="tpa-alert"
-  role="alert"
->
+Array [
   <div
-    className="pgn__alert-message-wrapper"
+    className="fade alert-content alert-success mt-n2 mb-5 alert show"
+    id="tpa-alert"
+    role="alert"
   >
     <div
-      className="alert-message-content"
+      className="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-heading h4"
+        className="alert-message-content"
       >
-        Almost done!
+        <div
+          className="alert-heading h4"
+        >
+          Almost done!
+        </div>
+        <p>
+          You've successfully signed into Google! We just need a little more information before you start learning with Your Platform Name Here.
+        </p>
       </div>
-      <p>
-        You've successfully signed into Google! We just need a little more information before you start learning with Your Platform Name Here.
-      </p>
     </div>
-  </div>
-</div>
+  </div>,
+  <h4
+    className="mt-4 mb-4"
+  >
+    Finish creating your account
+  </h4>,
+]
 `;

src/common-components/tests/__snapshots__/Zendesk.test.jsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Zendesk Help should match login page third party auth alert message snapshot 1`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": undefined,
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
+            "account settings",
+            "billing and payments",
+            "certificates",
+            "deadlines",
+            "errors and technical issues",
+            "other",
+            "proctoring",
+          ],
+        },
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;

src/config/index.js

@@ -0,0 +1,37 @@
+const configuration = {
+  // Cookies related configs
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
+  REGISTER_CONVERSION_COOKIE_NAME: process.env.REGISTER_CONVERSION_COOKIE_NAME || null,
+  // Features
+  DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
+  ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
+  ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
+  ENABLE_POPULAR_AND_TRENDING_RECOMMENDATIONS: process.env.ENABLE_POPULAR_AND_TRENDING_RECOMMENDATIONS || false,
+  MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || true,
+  SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
+  // Links
+  ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null,
+  AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,
+  LOGIN_ISSUE_SUPPORT_LINK: process.env.LOGIN_ISSUE_SUPPORT_LINK || null,
+  PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK || null,
+  POST_REGISTRATION_REDIRECT_URL: process.env.POST_REGISTRATION_REDIRECT_URL || '',
+  PRIVACY_POLICY: process.env.PRIVACY_POLICY || null,
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || null,
+  TOS_LINK: process.env.TOS_LINK || null,
+  // Base container images
+  BANNER_IMAGE_LARGE: process.env.BANNER_IMAGE_LARGE || '',
+  BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '',
+  BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '',
+  BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '',
+  // Recommendation constants
+  GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]',
+  POPULAR_PRODUCTS: process.env.POPULAR_PRODUCTS || '[]',
+  TRENDING_PRODUCTS: process.env.TRENDING_PRODUCTS || '[]',
+  // Miscellaneous
+  INFO_EMAIL: process.env.INFO_EMAIL || '',
+  ZENDESK_KEY: process.env.ZENDESK_KEY,
+  ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
+};
+
+export default configuration;

src/data/constants.js

@@ -1,9 +1,11 @@
 // URL Paths
 export const LOGIN_PAGE = '/login';
 export const REGISTER_PAGE = '/register';
+export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
 export const RESET_PAGE = '/reset';
-export const WELCOME_PAGE = '/welcome';
+export const AUTHN_PROGRESSIVE_PROFILING = '/welcome';
 export const DEFAULT_REDIRECT_URL = '/dashboard';
+export const RECOMMENDATIONS = '/recommendations';
 export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
 export const PAGE_NOT_FOUND = '/notfound';
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
@@ -22,16 +24,13 @@ export const PENDING_STATE = 'pending';
 export const COMPLETE_STATE = 'complete';
 export const FAILURE_STATE = 'failure';
 export const FORBIDDEN_STATE = 'forbidden';
+export const EMBEDDED = 'embedded';
 
 // Regex
-export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+)*'
-                                 + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
-                                 + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
-                                 + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
 export const LETTER_REGEX = /[a-zA-Z]/;
 export const NUMBER_REGEX = /\d/;
-export const VALID_NAME_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape
 
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.
-export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later', 'register_for_free'];
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
+export const REDIRECT = 'redirect';

src/data/optimizely.js

@@ -0,0 +1,17 @@
+import {
+  createInstance,
+} from '@optimizely/react-sdk';
+
+const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
+
+const getOptimizelyInstance = () => {
+  if (OPTIMIZELY_SDK_KEY) {
+    return createInstance({
+      sdkKey: OPTIMIZELY_SDK_KEY,
+    });
+  }
+
+  return null;
+};
+
+export default getOptimizelyInstance();

src/data/reducers.js

@@ -12,6 +12,10 @@ import {
   reducer as loginReducer,
   storeName as loginStoreName,
 } from '../login';
+import {
+  reducer as authnProgressiveProfilingReducers,
+  storeName as authnProgressiveProfilingStoreName,
+} from '../progressive-profiling';
 import {
   reducer as registerReducer,
   storeName as registerStoreName,
@@ -20,10 +24,6 @@ import {
   reducer as resetPasswordReducer,
   storeName as resetPasswordStoreName,
 } from '../reset-password';
-import {
-  reducer as welcomePageReducers,
-  storeName as welcomePageStoreName,
-} from '../welcome';
 
 const createRootReducer = () => combineReducers({
   [loginStoreName]: loginReducer,
@@ -31,6 +31,6 @@ const createRootReducer = () => combineReducers({
   [commonComponentsStoreName]: commonComponentsReducer,
   [forgotPasswordStoreName]: forgotPasswordReducer,
   [resetPasswordStoreName]: resetPasswordReducer,
-  [welcomePageStoreName]: welcomePageReducers,
+  [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers,
 });
 export default createRootReducer;

src/data/sagas.js

@@ -3,9 +3,9 @@ import { all } from 'redux-saga/effects';
 import { saga as commonComponentsSaga } from '../common-components';
 import { saga as forgotPasswordSaga } from '../forgot-password';
 import { saga as loginSaga } from '../login';
+import { saga as authnProgressiveProfilingSaga } from '../progressive-profiling';
 import { saga as registrationSaga } from '../register';
 import { saga as resetPasswordSaga } from '../reset-password';
-import { saga as welcomePageSaga } from '../welcome';
 
 export default function* rootSaga() {
   yield all([
@@ -14,6 +14,6 @@ export default function* rootSaga() {
     commonComponentsSaga(),
     forgotPasswordSaga(),
     resetPasswordSaga(),
-    welcomePageSaga(),
+    authnProgressiveProfilingSaga(),
   ]);
 }

src/data/utils/cookies.js

@@ -1,21 +1,11 @@
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
-export function setCookie(cookieName, cookieValue, cookieExpiry) {
+export default function setCookie(cookieName, cookieValue, cookieExpiry) {
   const cookies = new Cookies();
-  const options = { domain: getConfig().COOKIE_DOMAIN, path: '/' };
+  const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
   if (cookieExpiry) {
     options.expires = cookieExpiry;
   }
   cookies.set(cookieName, cookieValue, options);
 }
-
-export default function setSurveyCookie(surveyType) {
-  const cookieName = getConfig().USER_SURVEY_COOKIE_NAME;
-  if (cookieName) {
-    const signupTimestamp = (new Date()).getTime();
-    // set expiry to exactly 24 hours from now
-    const cookieExpiry = new Date(signupTimestamp + 1 * 864e5);
-    setCookie(cookieName, surveyType, cookieExpiry);
-  }
-}

src/data/utils/dataUtils.js

@@ -49,8 +49,8 @@ export const updatePathWithQueryParams = (path) => {
   return `${path}${queryParams}`;
 };
 
-export const getAllPossibleQueryParam = () => {
-  const urlParams = QueryString.parse(window.location.search);
+export const getAllPossibleQueryParams = (locationURl = null) => {
+  const urlParams = locationURl ? QueryString.parseUrl(locationURl).query : QueryString.parse(window.location.search);
   const params = {};
   Object.entries(urlParams).forEach(([key, value]) => {
     if (AUTH_PARAMS.indexOf(key) > -1) {
@@ -76,3 +76,8 @@ export const windowScrollTo = (options) => {
 
   return window.scrollTo(options.top, options.left);
 };
+
+export const isHostAvailableInQueryParams = () => {
+  const queryParams = getAllPossibleQueryParams();
+  return 'host' in queryParams;
+};

src/data/utils/dataUtils.test.js

@@ -1,5 +1,5 @@
-import { LOGIN_PAGE } from '../constants';
 import { updatePathWithQueryParams } from './dataUtils';
+import { LOGIN_PAGE } from '../constants';
 
 describe('updatePathWithQueryParams', () => {
   it('should append query params into the path', () => {

src/data/utils/index.js

@@ -1,10 +1,11 @@
 export {
   getTpaProvider,
   getTpaHint,
-  updatePathWithQueryParams,
-  getAllPossibleQueryParam,
+  getAllPossibleQueryParams,
   getActivationStatus,
+  isHostAvailableInQueryParams,
+  updatePathWithQueryParams,
   windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';
-export { default as setSurveyCookie, setCookie } from './cookies';
+export { default as setCookie } from './cookies';

src/field-renderer/FieldRenderer.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 const FormFieldRenderer = (props) => {
   let formField = null;
   const {
-    errorMessage, fieldData, onChangeHandler, isRequired, value,
+    className, errorMessage, fieldData, onChangeHandler, isRequired, value,
   } = props;
 
   const handleFocus = (e) => {
@@ -26,6 +26,7 @@ const FormFieldRenderer = (props) => {
       formField = (
         <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
           <Form.Control
+            className={className}
             as="select"
             name={fieldData.name}
             value={value}
@@ -54,6 +55,7 @@ const FormFieldRenderer = (props) => {
       formField = (
         <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
           <Form.Control
+            className={className}
             as="textarea"
             name={fieldData.name}
             value={value}
@@ -76,6 +78,7 @@ const FormFieldRenderer = (props) => {
       formField = (
         <Form.Group controlId={fieldData.name} isInvalid={!!(isRequired && errorMessage)}>
           <Form.Control
+            className={className}
             name={fieldData.name}
             value={value}
             aria-invalid={isRequired && Boolean(errorMessage)}
@@ -97,6 +100,7 @@ const FormFieldRenderer = (props) => {
       formField = (
         <Form.Group isInvalid={!!(isRequired && errorMessage)}>
           <Form.Checkbox
+            className={className}
             id={fieldData.name}
             checked={!!value}
             name={fieldData.name}
@@ -124,6 +128,7 @@ const FormFieldRenderer = (props) => {
   return formField;
 };
 FormFieldRenderer.defaultProps = {
+  className: '',
   value: '',
   handleBlur: null,
   handleFocus: null,
@@ -132,17 +137,22 @@ FormFieldRenderer.defaultProps = {
 };
 
 FormFieldRenderer.propTypes = {
+  className: PropTypes.string,
   fieldData: PropTypes.shape({
     type: PropTypes.string,
     label: PropTypes.string,
     name: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
   }).isRequired,
   onChangeHandler: PropTypes.func.isRequired,
   handleBlur: PropTypes.func,
   handleFocus: PropTypes.func,
   errorMessage: PropTypes.string,
   isRequired: PropTypes.bool,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
 };
 
 export default FormFieldRenderer;

src/field-renderer/index.jsx

@@ -1 +1,2 @@
-export { default } from './FieldRenderer';
+/* eslint-disable import/prefer-default-export */
+export { default as FormFieldRenderer } from './FieldRenderer';

src/field-renderer/tests/FieldRenderer.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { getConfig } from '@edx/frontend-platform';
 import { mount } from 'enzyme';
 
 import FieldRenderer from '../FieldRenderer';
@@ -24,7 +25,7 @@ describe('FieldRendererTests', () => {
       type: 'select',
       label: 'Year of Birth',
       name: 'yob-field',
-      options: [['1997', 1997], ['1998', 1998]],
+      options: [['1997', '1997'], ['1998', '1998']],
     };
 
     const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
@@ -82,7 +83,7 @@ describe('FieldRendererTests', () => {
   it('should render checkbox field', () => {
     const fieldData = {
       type: 'checkbox',
-      label: 'I agree that edX may send me marketing messages.',
+      label: `I agree that ${getConfig().SITE_NAME} may send me marketing messages.`,
       name: 'marketing-emails-opt-in-field',
     };
 
@@ -91,7 +92,7 @@ describe('FieldRendererTests', () => {
     field.simulate('change', { target: { checked: true, type: 'checkbox' } });
 
     expect(field.prop('type')).toEqual('checkbox');
-    expect(fieldRenderer.find('label').text()).toEqual('I agree that edX may send me marketing messages.');
+    expect(fieldRenderer.find('label').text()).toEqual(fieldData.label);
     expect(value).toEqual(true);
   });
 

src/forgot-password/ForgotPasswordAlert.jsx

@@ -1,21 +1,22 @@
 import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import { CheckCircle, Error } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
+import messages from './messages';
 import {
   COMPLETE_STATE, FORBIDDEN_STATE, FORM_SUBMISSION_ERROR, INTERNAL_SERVER_ERROR,
 } from '../data/constants';
 import { PASSWORD_RESET } from '../reset-password/data/constants';
-import messages from './messages';
 
 const ForgotPasswordAlert = (props) => {
-  const { email, emailError, intl } = props;
+  const { formatMessage } = useIntl();
+  const { email, emailError } = props;
   let message = '';
-  let heading = intl.formatMessage(messages['forgot.password.error.alert.title']);
+  let heading = formatMessage(messages['forgot.password.error.alert.title']);
   let { status } = props;
 
   if (emailError) {
@@ -24,7 +25,7 @@ const ForgotPasswordAlert = (props) => {
 
   switch (status) {
     case COMPLETE_STATE:
-      heading = intl.formatMessage(messages['confirmation.message.title']);
+      heading = formatMessage(messages['confirmation.message.title']);
       message = (
         <FormattedMessage
           id="forgot.password.confirmation.message"
@@ -36,7 +37,7 @@ const ForgotPasswordAlert = (props) => {
             email: <span className="data-hj-suppress">{email}</span>,
             supportLink: (
               <Alert.Link href={getConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
-                {intl.formatMessage(messages['confirmation.support.link'])}
+                {formatMessage(messages['confirmation.support.link'])}
               </Alert.Link>
             ),
           }}
@@ -44,26 +45,26 @@ const ForgotPasswordAlert = (props) => {
       );
      break;
     case INTERNAL_SERVER_ERROR:
-      message = intl.formatMessage(messages['internal.server.error']);
+      message = formatMessage(messages['internal.server.error']);
       break;
     case FORBIDDEN_STATE:
-      heading = intl.formatMessage(messages['forgot.password.error.message.title']);
-      message = intl.formatMessage(messages['forgot.password.request.in.progress.message']);
+      heading = formatMessage(messages['forgot.password.error.message.title']);
+      message = formatMessage(messages['forgot.password.request.in.progress.message']);
       break;
     case FORM_SUBMISSION_ERROR:
-      message = intl.formatMessage(messages['extend.field.errors'], { emailError });
+      message = formatMessage(messages['extend.field.errors'], { emailError });
       break;
     case PASSWORD_RESET.INVALID_TOKEN:
-      heading = intl.formatMessage(messages['invalid.token.heading']);
-      message = intl.formatMessage(messages['invalid.token.error.message']);
+      heading = formatMessage(messages['invalid.token.heading']);
+      message = formatMessage(messages['invalid.token.error.message']);
       break;
     case PASSWORD_RESET.FORBIDDEN_REQUEST:
-      heading = intl.formatMessage(messages['token.validation.rate.limit.error.heading']);
-      message = intl.formatMessage(messages['token.validation.rate.limit.error']);
+      heading = formatMessage(messages['token.validation.rate.limit.error.heading']);
+      message = formatMessage(messages['token.validation.rate.limit.error']);
       break;
     case PASSWORD_RESET.INTERNAL_SERVER_ERROR:
-      heading = intl.formatMessage(messages['token.validation.internal.sever.error.heading']);
-      message = intl.formatMessage(messages['token.validation.internal.sever.error']);
+      heading = formatMessage(messages['token.validation.internal.sever.error.heading']);
+      message = formatMessage(messages['token.validation.internal.sever.error']);
       break;
     default:
       break;
@@ -93,8 +94,7 @@ ForgotPasswordAlert.defaultProps = {
 ForgotPasswordAlert.propTypes = {
   status: PropTypes.string.isRequired,
   email: PropTypes.string,
-  intl: intlShape.isRequired,
   emailError: PropTypes.string,
 };
 
-export default injectIntl(ForgotPasswordAlert);
+export default ForgotPasswordAlert;

src/forgot-password/ForgotPasswordPage.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form,
   Hyperlink,
@@ -15,29 +15,31 @@ import {
 import { ChevronLeft } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { Redirect } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import BaseComponent from '../base-component';
-import { FormGroup } from '../common-components';
-import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
-import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
 import { forgotPassword, setForgotPasswordFormData } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
 import ForgotPasswordAlert from './ForgotPasswordAlert';
 import messages from './messages';
+import BaseContainer from '../base-container';
+import { FormGroup } from '../common-components';
+import { DEFAULT_STATE, LOGIN_PAGE } from '../data/constants';
+import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
+import { VALID_EMAIL_REGEX } from '../register/RegistrationFields/EmailField/constants';
 
 const ForgotPasswordPage = (props) => {
   const platformName = getConfig().SITE_NAME;
   const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
   const {
-    intl, status, submitState, emailValidationError,
+    status, submitState, emailValidationError,
   } = props;
 
+  const { formatMessage } = useIntl();
   const [email, setEmail] = useState(props.email);
   const [bannerEmail, setBannerEmail] = useState('');
   const [formErrors, setFormErrors] = useState('');
   const [validationError, setValidationError] = useState(emailValidationError);
-  const [key, setKey] = useState('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     sendPageEvent('login_and_registration', 'reset');
@@ -58,9 +60,9 @@ const ForgotPasswordPage = (props) => {
     let error = '';
 
     if (value === '') {
-      error = intl.formatMessage(messages['forgot.password.empty.email.field.error']);
+      error = formatMessage(messages['forgot.password.empty.email.field.error']);
     } else if (!emailRegex.test(value)) {
-      error = intl.formatMessage(messages['forgot.password.page.invalid.email.message']);
+      error = formatMessage(messages['forgot.password.page.invalid.email.message']);
     }
 
     return error;
@@ -89,35 +91,32 @@ const ForgotPasswordPage = (props) => {
   const tabTitle = (
     <div className="d-inline-flex flex-wrap align-items-center">
       <Icon src={ChevronLeft} />
-      <span className="ml-2">{intl.formatMessage(messages['sign.in.text'])}</span>
+      <span className="ml-2">{formatMessage(messages['sign.in.text'])}</span>
     </div>
   );
 
   return (
-    <BaseComponent>
+    <BaseContainer>
       <Helmet>
-        <title>{intl.formatMessage(messages['forgot.password.page.title'],
+        <title>{formatMessage(messages['forgot.password.page.title'],
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
       <div>
-        <Tabs activeKey="" id="controlled-tab" onSelect={(k) => setKey(k)}>
+        <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
           <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
         </Tabs>
-        { key && (
-          <Redirect to={updatePathWithQueryParams(key)} />
-        )}
         <div id="main-content" className="main-content">
           <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
             <ForgotPasswordAlert email={bannerEmail} emailError={formErrors} status={status} />
             <h2 className="h4">
-              {intl.formatMessage(messages['forgot.password.page.heading'])}
+              {formatMessage(messages['forgot.password.page.heading'])}
             </h2>
             <p className="mb-4">
-              {intl.formatMessage(messages['forgot.password.page.instructions'])}
+              {formatMessage(messages['forgot.password.page.instructions'])}
             </p>
             <FormGroup
-              floatingLabel={intl.formatMessage(messages['forgot.password.page.email.field.label'])}
+              floatingLabel={formatMessage(messages['forgot.password.page.email.field.label'])}
               name="email"
               value={email}
               autoComplete="on"
@@ -125,17 +124,17 @@ const ForgotPasswordPage = (props) => {
               handleChange={(e) => setEmail(e.target.value)}
               handleBlur={handleBlur}
               handleFocus={handleFocus}
-              helpText={[intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })]}
+              helpText={[formatMessage(messages['forgot.password.email.help.text'], { platformName })]}
             />
             <StatefulButton
               id="submit-forget-password"
               name="submit-forget-password"
               type="submit"
               variant="brand"
-              className="forgot-password-button-width"
+              className="forgot-password--button"
               state={submitState}
               labels={{
-                default: intl.formatMessage(messages['forgot.password.page.submit.button']),
+                default: formatMessage(messages['forgot.password.page.submit.button']),
                 pending: '',
               }}
               onClick={handleSubmit}
@@ -150,11 +149,11 @@ const ForgotPasswordPage = (props) => {
                 target="_blank"
                 showLaunchIcon={false}
               >
-                {intl.formatMessage(messages['need.help.sign.in.text'])}
+                {formatMessage(messages['need.help.sign.in.text'])}
               </Hyperlink>
             )}
             <p className="mt-5.5 small text-gray-700">
-              {intl.formatMessage(messages['additional.help.text'], { platformName })}
+              {formatMessage(messages['additional.help.text'], { platformName })}
               <span>
                 <Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink>
               </span>
@@ -162,7 +161,7 @@ const ForgotPasswordPage = (props) => {
           </Form>
         </div>
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 
@@ -170,7 +169,6 @@ ForgotPasswordPage.propTypes = {
   email: PropTypes.string,
   emailValidationError: PropTypes.string,
   forgotPassword: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
   setForgotPasswordFormData: PropTypes.func.isRequired,
   status: PropTypes.string,
   submitState: PropTypes.string,
@@ -189,4 +187,4 @@ export default connect(
     forgotPassword,
     setForgotPasswordFormData,
   },
-)(injectIntl(ForgotPasswordPage));
+)(ForgotPasswordPage);

src/forgot-password/data/reducers.js

@@ -1,6 +1,6 @@
+import { FORGOT_PASSWORD, FORGOT_PASSWORD_PERSIST_FORM_DATA } from './actions';
 import { INTERNAL_SERVER_ERROR, PENDING_STATE } from '../../data/constants';
 import { PASSWORD_RESET_FAILURE } from '../../reset-password/data/actions';
-import { FORGOT_PASSWORD, FORGOT_PASSWORD_PERSIST_FORM_DATA } from './actions';
 
 export const defaultState = {
   status: '',

src/forgot-password/index.js

@@ -1,4 +1,4 @@
-export { default } from './ForgotPasswordPage';
+export { default as ForgotPasswordPage } from './ForgotPasswordPage';
 export { default as reducer } from './data/reducers';
 export { FORGOT_PASSWORD } from './data/actions';
 export { default as saga } from './data/sagas';

src/forgot-password/messages.js

@@ -51,11 +51,6 @@ const messages = defineMessages({
     defaultMessage: 'Enter your email',
     description: 'Error message that appears when user tries to submit empty email field',
   },
-  'forgot.password.invalid.email.message': {
-    id: 'forgot.password.invalid.email.message',
-    defaultMessage: "The email address you've provided isn't formatted correctly.",
-    description: 'message for invalid email',
-  },
   'forgot.password.email.help.text': {
     id: 'forgot.password.email.help.text',
     defaultMessage: 'The email address you used to register with {platformName}',
@@ -129,10 +124,5 @@ const messages = defineMessages({
     defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
     description: 'Error message that appears when server responds with 500 error code',
   },
-  'rate.limit.error': {
-    id: 'rate.limit.error',
-    defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',
-    description: 'Error message that appears when server responds with 429 error code',
-  },
 });
 export default messages;

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,15 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
 import { mergeConfig } from '@edx/frontend-platform';
-import * as analytics from '@edx/frontend-platform/analytics';
-import * as auth from '@edx/frontend-platform/auth';
 import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import { INTERNAL_SERVER_ERROR, LOGIN_PAGE } from '../../data/constants';
@@ -17,14 +13,20 @@ import { PASSWORD_RESET } from '../../reset-password/data/constants';
 import { setForgotPasswordFormData } from '../data/actions';
 import ForgotPasswordPage from '../ForgotPasswordPage';
 
-jest.mock('@edx/frontend-platform/analytics');
-jest.mock('@edx/frontend-platform/auth');
+const mockedNavigator = jest.fn();
 
-analytics.sendPageEvent = jest.fn();
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendPageEvent: jest.fn(),
+  sendTrackEvent: jest.fn(),
+}));
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom')),
+  useNavigate: () => mockedNavigator,
+}));
 
 const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();
-const history = createMemoryHistory();
 
 const initialState = {
   forgotPassword: {
@@ -51,7 +53,12 @@ describe('ForgotPasswordPage', () => {
 
   beforeEach(() => {
     store = mockStore(initialState);
-    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3, username: 'edX' }));
+    jest.mock('@edx/frontend-platform/auth', () => ({
+      getAuthenticatedUser: jest.fn(() => ({
+        userId: 3,
+        username: 'test-user',
+      })),
+    }));
     configure({
       loggingService: { logError: jest.fn() },
       config: {
@@ -191,11 +198,6 @@ describe('ForgotPasswordPage', () => {
     expect(forgotPasswordPage.find('#email-invalid-feedback').exists()).toEqual(false);
   });
 
-  it('check cookie rendered', () => {
-    const forgotPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    expect(forgotPage.find(<CookiePolicyBanner />)).toBeTruthy();
-  });
-
   it('should display success message after email is sent', () => {
     store = mockStore({
       ...initialState,
@@ -227,15 +229,11 @@ describe('ForgotPasswordPage', () => {
   });
 
   it('should redirect onto login page', async () => {
-    const forgotPasswordPage = mount(reduxWrapper(
-      <Router history={history}>
-        <IntlForgotPasswordPage {...props} />
-      </Router>,
-    ));
+    const forgotPasswordPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     await act(async () => { await forgotPasswordPage.find('nav').find('a').first().simulate('click'); });
 
     forgotPasswordPage.update();
-    expect(history.location.pathname).toEqual(LOGIN_PAGE);
+    expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
   });
 });

src/i18n/index.jsx

@@ -1,41 +1,39 @@
+import { messages as paragonMessages } from '@edx/paragon';
+
 import arMessages from './messages/ar.json';
-import caMessages from './messages/ca.json';
-// no need to import en messages-- they are in the defaultMessage field
-import dedeMessages from './messages/de_DE.json';
+import deMessages from './messages/de.json';
+import dedeCAMessages from './messages/de_DE.json';
 import es419Messages from './messages/es_419.json';
 import frMessages from './messages/fr.json';
-import heMessages from './messages/he.json';
+import frCAMessages from './messages/fr_CA.json';
 import hiMessages from './messages/hi.json';
-import idMessages from './messages/id.json';
-import ititMessages from './messages/it_IT.json';
-import kokrMessages from './messages/ko_kr.json';
-import plMessages from './messages/pl.json';
-import ptbrMessages from './messages/pt_br.json';
-import ptptMessages from './messages/pt_PT.json';
+import itMessages from './messages/it.json';
+import ititCAMessages from './messages/it_IT.json';
+import ptMessages from './messages/pt.json';
+import ptptCAMessages from './messages/pt_PT.json';
 import ruMessages from './messages/ru.json';
-import thMessages from './messages/th.json';
 import ukMessages from './messages/uk.json';
 import zhcnMessages from './messages/zh_CN.json';
+// no need to import en messages-- they are in the defaultMessage field
 
-const messages = {
+const appMessages = {
   ar: arMessages,
-  es: es419Messages, // Prospectus uses es language code for spanish, added `es` option and pointed to es-419 strings.
   'es-419': es419Messages,
   fr: frMessages,
   'zh-cn': zhcnMessages,
-  'it-it': ititMessages,
-  'pt-pt': ptptMessages,
-  'de-de': dedeMessages,
-  ca: caMessages,
-  he: heMessages,
-  id: idMessages,
-  'ko-kr': kokrMessages,
-  pl: plMessages,
-  'pt-br': ptbrMessages,
-  ru: ruMessages,
-  th: thMessages,
-  uk: ukMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
   hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
+  'de-de': dedeCAMessages,
+  'it-it': ititCAMessages,
+  'pt-pt': ptptCAMessages,
 };
 
-export default messages;
+export default [
+  paragonMessages,
+  appMessages,
+];

src/i18n/messages/ar.json

@@ -1,20 +1,17 @@
 {
   "start.learning": "ابدأ التعلم ",
   "with.site.name": "مع {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "أهلا بك {username} في {siteName}",
   "complete.your.profile.1": "أكمل",
   "complete.your.profile.2": "ملفك الشخصي",
-  "welcome.to.platform": "أهلا بك {username} في {siteName}",
   "institution.login.page.sub.heading": "اختر مؤسستك من القائمة أدناه",
-  "forgot.password.confirmation.title": "تفقّد بريدك الإلكتروني",
-  "forgot.password.confirmation.support.link": "اتصل بالدعم الفني",
-  "forgot.password.confirmation.info": "إن لم تستلم رسالة إعادة تعيين كلمة المرور بعد دقيقة واحدة، فتحقق من أنك أدخلت عنوان البريد الإلكتروني الصحيح، أو تفقّد مجلد الرسائل غير المرغوب فيها في بريدك الإلكتروني.",
   "logistration.sign.in": "تسجيل الدخول",
   "logistration.register": "التسجيل",
-  "internal.server.error.message": "حدث خطأ ما. جرّب تحديث الصفحة أو تحقق من اتصالك بالانترنت.",
-  "server.ratelimit.error.message": "حدث خطأ بسبب كثرة الطلبات. رجاءً حاول مرة أخرى بعد مضي بعض الوقت.",
   "enterprisetpa.title.heading": "هل ترغب في تسجيل الدخول باستخدام بيانات {providerName} الخاصة بك؟",
-  "enterprisetpa.sso.button.title": "تسجيل الدخول باستخدام {providerName}",
   "enterprisetpa.login.button.text": "أرِني وسائل أخرى لتسجيل الدخول أو للتسجيل",
+  "enterprisetpa.login.button.text.public.account.creation.disabled": "أرني طرقًا أخرى لتسجيل الدخول",
   "sso.sign.in.with": "تسجيل الدخول باستخدام {providerName}",
   "sso.create.account.using": "إنشاء حساب باستخدام {providerName}",
   "show.password": "إظهار كلمة المرور",
@@ -26,6 +23,9 @@
   "tpa.alert.heading": "انتهينا تقريبا!",
   "login.third.party.auth.account.not.linked": "لقد نجحت في تسجيل الدخول إلى {currentProvider}، لكن حسابك على {currentProvider} غير موصول بأي حساب على {platformName}. لوصل حساباتك، سجّل الدخول الآن باستخدام كلمة مرورك على {platformName}.",
   "register.third.party.auth.account.not.linked": "لقد سجلت دخولك بنجاح إلى {currentProvider}! نحتاج فقط قليلاً بعدُ من المعلومات قبل أن تبدأ التعلم مع {platformName}.",
+  "registration.using.tpa.form.heading": "إتمام إنشاء حسابك",
+  "zendesk.supportTitle": "edX Support",
+  "zendesk.selectTicketForm": "الرجاء اختيار نوع الطلب الخاص بك:",
   "error.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجددًا.",
   "forgot.password.confirmation.message": "لقد أرسلنا بريدًا إلكترونيًا إلى {email} به إرشادات لإعادة ضبط كلمة المرور الخاصة بك. إن لم تستلم رسالة إعادة ضبط كلمة المرور بعد دقيقة واحدة، فتحقق من إدخال عنوان البريد الإلكتروني الصحيح، أو تفقد مجلد الرسائل غير المرغوب فيها. إن احتجت مزيدًا من المساعدة، {supportLink}.",
   "forgot.password.page.title": "نسيت كلمة المرور | {siteName}",
@@ -38,7 +38,6 @@
   "forgot.password.error.message.title": "حدث خطأ ما.",
   "forgot.password.request.in.progress.message": "طلبك السابق قيد التنفيذ، يرجى المحاولة مرة أخرى بعد لحظات قليلة.",
   "forgot.password.empty.email.field.error": "أدخل بريدك الإلكتروني",
-  "forgot.password.invalid.email.message": "صيغة عنوان البريد الإلكتروني الذي أدخلته غير صحيحة",
   "forgot.password.email.help.text": "عنوان البريد الإلكتروني الذي استخدمته للتسجيل في {platformName}",
   "confirmation.message.title": "تفقّد بريدك الإلكتروني",
   "confirmation.support.link": "اتصل بالدعم الفني",
@@ -53,7 +52,6 @@
   "token.validation.internal.sever.error.heading": "فشل في التحقق من صحة الشارة",
   "token.validation.internal.sever.error": "حدث خطأ ما. جرب تحديث الصفحة أو تحقق من اتصالك بالإنترنت.",
   "internal.server.error": "حدث خطأ ما. جرب تحديث الصفحة أو تحقق من اتصالك بالإنترنت.",
-  "rate.limit.error": "حدث خطأ بسبب كثرة الطلبات. رجاءً حاول مرة أخرى بعد مضي بعض الوقت.",
   "account.activation.error.message": "شي ما لم يسر على ما يرام، يرجى {supportLink} لحل هذه المشكلة.",
   "login.inactive.user.error": "أنت بحاجة لتفعيل حسابك من أجل تسجيل الدخول{lineBreak}\n{lineBreak}لقد أرسلنا للتو رابطًا للتفعيل إلى {email}. إن لم تتلقّ بريدًا إلكترونيا، تفقّد مجلدات الرسائل غير المرغوب فيها أو {supportLink}.",
   "allowed.domain.login.error": "كونك مستخدمًا على {allowedDomain}، فإن عليك تسجيل الدخول باستخدام {tpaLink} الخاص بـ {allowedDomain} .",
@@ -65,45 +63,32 @@
   "login.user.identity.label": "اسم المستخدم أو البريد الإلكتروني",
   "login.password.label": "كلمة المرور",
   "sign.in.button": "تسجيل الدخول",
-  "sign.in.btn.pending.state": "التحميل جارٍ",
-  "need.help.signing.in.collapsible.menu": "هل تحتاج مساعدة في تسجيل الدخول؟",
-  "forgot.password.link": "نسيت كلمة مروري",
   "forgot.password": "نسيت كلمة المرور",
-  "other.sign.in.issues": "مشاكل أخرى عند تسجيل الدخول",
-  "need.other.help.signing.in.collapsible.menu": "هل تحتاج مساعدة أخرى في تسجيل الدخول؟",
   "institution.login.button": "بيانات المؤسسة / الجامعة",
   "institution.login.page.title": "تسجيل الدخول باستخدام بيانات المؤسسة / الجامعة",
-  "institution.login.page.back.button": "العودة إلى تسجيل الدخول",
-  "create.an.account": " أنشئ حساباً جديداً.",
   "login.other.options.heading": "أو قم بتسجيل الدخول باستخدام:",
   "non.compliant.password.title": "لقد غيرنا متطلبات أمان كلمة المرور مؤخرًا",
   "non.compliant.password.message": "كلمة مرورك الحالية لا تستسجيب لمتطلبات الأمان الجديدة. لقد أرسلنا للتو رسالة لإعادة ضبط كلمة المرور إلى عنوان البريد الإلكتروني المرتبط بهذا الحساب. شكرًا لك على مساعدتنا في الحفاظ على سلامة بياناتك.",
   "account.locked.out.message.1": "لحماية حسابك، تم إقفاله مؤقتًا. حاول مرة أخرى بعد 30 دقيقة.",
-  "first.time.here": "أول مرة لك هنا؟",
-  "email.help.message": "عنوان البريد الإلكتروني الذي استخدمته للتسجيل في edX.",
   "enterprise.login.btn.text": "بيانات الشركة أو المدرسة",
-  "email.format.validation.message": "صيغة عنوان البريد الإلكتروني الذي أدخلته غير صحيحة",
   "username.or.email.format.validation.less.chars.message": "يجب أن يحتوي اسم المستخدم أو البريد الإلكتروني على 3 أحرف على الأقل.",
   "email.validation.message": "أدخل اسم المستخدم أو البريد الإلكتروني الخاص بك",
   "password.validation.message": "لم يتم استيفاء معايير كلمة المرور",
-  "register.link": " أنشئ حساباً",
-  "sign.in.heading": "تسجيل الدخول",
   "account.activation.success.message.title": "نجح الأمر! لقد قمت بتفعيل حسابك.",
   "account.activation.success.message": "ستصلك الآن تحديثات وتنبيهات عبر البريد الإلكتروني منا تتعلق بالمساقات التي قمت بالتسجيل فيها. قم بتسجيل الدخول للمتابعة.",
   "account.activation.info.message": "هذا الحساب مفعَّل من قبل.",
   "account.activation.error.message.title": "لا يمكن تفعيل حسابك",
   "account.activation.support.link": "الاتصال بالدعم",
-  "tpa.account.link": "حساب {provider}",
   "account.confirmation.success.message.title": "نجحت العملية! لقد أكدت بريدك الإلكتروني.",
   "account.confirmation.success.message": "سجل دخولك للمتابعة.",
   "account.confirmation.info.message": "هذا البريد الإلكتروني مؤكد من قبل.",
   "account.confirmation.error.message.title": "لا يمكن تأكيد بريدك الإلكتروني",
+  "tpa.account.link": "حساب {provider}",
+  "internal.server.error.message": "حدث خطأ ما. جرّب تحديث الصفحة أو تحقق من اتصالك بالانترنت.",
   "login.rate.limit.reached.message": "كثرت محاولات تسجيل الدخول الفاشلة. رجاءً أعد المحاولة لاحقًا.",
   "login.failure.header.title": "لم نتمكّن من تسجيل دخولك.",
   "contact.support.link": "اتصل بدعم {platformName}",
   "login.incorrect.credentials.error": "اسم المستخدم أو البريد الإلكتروني أو كلمة المرور التي أدخلتها غير صحيحة. حاول مرة اخرى.",
-  "login.failed.attempt.error": "لديك {remainingAttempts, plural,\none {محاولة واحدة}\ntwo {محاولتان}\nfew {# محاولات}\nmany {# محاولة}\nother {# محاولة}\n} أخرى لتسجيل الدخول قبل أن يتم إقفال حسابك مؤقتًا.",
-  "login.locked.out.error.message": "لحماية حسابك، تم إقفاله مؤقتًا. حاول مرة أخرى بعد {lockedOutPeriod, plural,\n  one {دقيقة واحدة}\n  two {دقيقتين}\n  few {# دقائق}\n  many {# دقيقة}\n  other {# دقيقة}\n}.",
   "login.form.invalid.error.message": "رجاءً املأ الحقول أدناه.",
   "login.incorrect.credentials.error.reset.link.text": "إعادة ضبط كلمه المرور",
   "login.incorrect.credentials.error.before.account.blocked.text": "انقر هنا لإعادة ضبطها.",
@@ -113,20 +98,21 @@
   "password.security.block.body": "اكتشف نظامنا أن كلمة مرورك صعيفة. غيّر كلمة مرورك حتى يظل حسابك آمنًا.",
   "password.security.close.button": "إغلاق",
   "password.security.redirect.to.reset.password.button": "إعادة ضبط كلمة المرور",
-  "progressive.profiling.page.title": "الحقول الاختيارية | {siteName}",
+  "login.tpa.authentication.failure": "عذرًا ، غير مصرح لك بالوصول إلى {platform_name} عبر هذه القناة. يرجى الاتصال بمسؤول التعلم أو المدير من أجل الوصول إلى {platform_name}. {lineBreak} {lineBreak} تفاصيل الخطأ: {lineBreak} {errorMessage}",
+  "progressive.profiling.page.title": "مرحبا بكم | {siteName}",
   "progressive.profiling.page.heading": "بعض الأسئلة الموجهة لك ستساعدنا كي نزداد ذكاءً.",
   "optional.fields.information.link": "معرفة المزيد عن كيفية استخدامنا لهذه المعلومات.",
   "optional.fields.submit.button": "إرسال",
   "optional.fields.skip.button": "التخطي مؤقتا",
-  "optional.fields.next.button": "Next",
+  "optional.fields.next.button": "التالي",
   "continue.to.platform": "المواصلة إلى {platformName}",
   "modal.title": "شكرا لإعلامنا.",
   "modal.description": "إن غيرت رأيك، قيمكنك إكمال ملفك الشخصي ضمن الإعدادات في أي وقت.",
   "welcome.page.error.heading": "لم نتمكن من تحديث ملفك الشخصي",
   "welcome.page.error.message": "حدث خطأ ما. يمكنك إكمال ملفك الشخصي ضمن الإعدادات في أي وقت.",
-  "recommendation.page.title": "Recommendations| {siteName}",
-  "recommendation.page.heading": "We have a few recommendations to get you started.",
-  "recommendation.skip.button": "Skip for now",
+  "recommendation.page.title": "التوصيات | {siteName}",
+  "recommendation.page.heading": "لدينا بعض التوصيات لكي تبدأ.",
+  "recommendation.skip.button": "التخطي مؤقتا",
   "register.page.title": "التسجيل | {siteName}",
   "registration.fullname.label": "الاسم الكامل",
   "registration.email.label": "البريد الإلكتروني",
@@ -139,51 +125,34 @@
   "help.text.username.2": "لا يمكن تغيير هذا لاحقًا.",
   "help.text.email": "لتفعيل الحساب و التحديثات الهامة",
   "create.account.for.free.button": "إنشاء حساب مجانا",
-  "create.an.account.btn.pending.state": "التحميل جارٍ",
   "registration.other.options.heading": "أو سجل باستخدام:",
   "register.institution.login.button": "بيانات المؤسسة / الجامعة",
   "register.institution.login.page.title": "التسجيل باستخدام بيانات المؤسسة / الجامعة",
   "empty.name.field.error": "أدخل اسمك الكامل",
   "empty.email.field.error": "أدخل بريدك الإلكتروني",
-  "email.do.not.match": "عناوين البريد الإلكتروني غير متطابقة.",
   "empty.username.field.error": "يجب أن يتكون اسم المستخدم من 2 إلى 30 حرفًا",
   "empty.password.field.error": "لم يتم استيفاء معايير كلمة المرور",
   "empty.country.field.error": "حدد بلدك أو منطقة إقامتك",
+  "email.do.not.match": "عناوين البريد الإلكتروني غير متطابقة.",
   "email.invalid.format.error": "أدخل بريدا إلكترونيا صحيحا",
-  "email.ratelimit.less.chars.validation.message": "يجب أن يتكون البريد الإلكتروني من 3 أحرف على الأقل.",
   "username.validation.message": "يجب أن يتكون اسم المستخدم من 2 إلى 30 حرفًا",
   "name.validation.message": "أدخل اسمًا صحيحا",
   "username.format.validation.message": "يمكن أن تحتوي أسماء المستخدمين فقط على أحرف (A-Z، a-z)، و أرقام (0-9)، و أسطر سفلية (_)، و واصلات (-). لا يمكن أن تحتوي أسماء المستخدمين على مسافات",
-  "support.education.research": "دعم الأبحاث التربوية من خلال توفير معلومات إضافية. (اختياري)",
   "registration.request.failure.header": "لم نتمكّن من إنشاء حسابك.",
   "registration.empty.form.submission.error": "رجاءً تحقّق من أجوبتك و حاول مجددا.",
   "registration.request.server.error": "حدث خطأ ما. جرب تحديث الصفحة أو تحقق من اتصالك بالإنترنت.",
   "registration.rate.limit.error": "كثرت محاولات التسجيل الفاشلة. أعد المحاولة لاحقًا.",
   "registration.tpa.session.expired": "نفد وقت التسجيل باستخدام {provider}.",
+  "registration.tpa.authentication.failure": "عذرًا، غير مصرح لك بالوصول إلى {platform_name} عبر هذه القناة. يرجى الاتصال بمسؤول التعلم أو المدير من أجل الوصول إلى {platform_name}. {lineBreak} {lineBreak} تفاصيل الخطأ: {lineBreak} {errorMessage}",
   "terms.of.service.and.honor.code": "شروط الخدمة وميثاق الشرف الأكاديمي",
   "privacy.policy": "سياسة الخصوصية",
   "honor.code": "ميثاق الشرف الأكاديمي",
   "terms.of.service": "شروط الخدمة",
-  "registration.year.of.birth.label": "سنة الميلاد (اختياري)",
-  "registration.field.gender.options.label": "الجنس (اختياري)",
-  "registration.goals.label": "أخبرنا عن سبب اهتمامك بـ edX (اختياري)",
-  "registration.field.gender.options.f": "أنثى",
-  "registration.field.gender.options.m": "ذكر",
-  "registration.field.gender.options.o": "آخر / أفضل عدم التصريح",
-  "registration.field.education.levels.label": "أعلى مستوى تعليمي مكتمل (اختياري)",
-  "registration.field.education.levels.p": "دكتوراه",
-  "registration.field.education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
-  "registration.field.education.levels.b": "بكالوريوس / ليسانس",
-  "registration.field.education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
-  "registration.field.education.levels.hs": "الثانوية العامة / البكالوريا",
-  "registration.field.education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
-  "registration.field.education.levels.el": "المدرسة الابتدائية / الأساسية",
-  "registration.field.education.levels.none": "دون تعليم رسمي",
-  "registration.field.education.levels.other": "نوع آخر من التعليم",
   "registration.username.suggestion.label": "مقترح:",
-  "registration.using.tpa.form.heading": "إتمام إنشاء حسابك",
   "did.you.mean.alert.text": "هل تقصد",
-  "register.page.terms.of.service": "أوافق على {termsOfService} الخاصة بـ{platformName} ",
+  "register.page.terms.of.service.and.honor.code": "بإنشاءك حسابًا، فإنك توافق على {tosAndHonorCode} و تقر بأن {platformName} و كل عضو يعالج بياناتك الشخصية وفقًا لـ{privacyPolicy}.",
+  "register.page.honor.code": "اوافق على شروط {platformName} {tosAndHonorCode}",
+  "register.page.terms.of.service": "اوافق على {platformName} {termsOfService}",
   "sign.in": "تسجيل الدخول",
   "reset.password.page.title": "إعادة ضبط كلمة المرور | {siteName}",
   "reset.password": "إعادة ضبط كلمة المرور",
@@ -192,40 +161,10 @@
   "confirm.password.label": "تأكيد كلمة المرور",
   "passwords.do.not.match": "كلمتا المرور غير متطابقتين",
   "confirm.your.password": "تأكيد كلمة مرورك",
-  "forgot.password.confirmation.sign.in.link": "تسجيل الدخول",
-  "reset.password.request.forgot.password.text": "نسيت كلمة المرور",
-  "reset.password.request.invalid.token.header": "رابط إعادة ضبط كلمة المرور غير صالح",
-  "reset.password.empty.new.password.field.error": "رجاءً أدخل كلمة مرورك الجديدة.",
   "reset.password.failure.heading": "لم نتمكن من إعادة ضبط كلمة مرورك.",
   "reset.password.form.submission.error": "رجاءً تحقق من أجوبتك وحاول مجددًا.",
-  "reset.password.request.server.error": "فشلت إعادة ضبط كلمة المرور",
-  "reset.password.token.validation.sever.error": "فشل التحقق من صحة الشارة",
   "reset.server.rate.limit.error": "طلبات أكثر مما ينبغي.",
   "reset.password.success.heading": "تمت إعادة ضبط كلمة المرور.",
   "reset.password.success": "تمت إعادة ضبط كلمة مرورك. سجل الدخول إلى حسابك.",
-  "progressive.profiling.page.title": "الحقول الاختيارية | {siteName}",
-  "progressive.profiling.page.heading": "بعض الأسئلة الموجهة لك ستساعدنا كي نزداد ذكاءً.",
-  "gender.options.label": "الجنس (اختياري)",
-  "gender.options.f": "أنثى",
-  "gender.options.m": "ذكر",
-  "gender.options.o": "آخر / أفضل عدم التصريح",
-  "education.levels.label": "أعلى مستوى تعليمي مكتمل (اختياري)",
-  "education.levels.p": "دكتوراه",
-  "education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
-  "education.levels.b": "بكالوريوس / ليسانس",
-  "education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
-  "education.levels.hs": "الثانوية العامة / البكالوريا",
-  "education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
-  "education.levels.el": "المدرسة الابتدائية / الأساسية",
-  "education.levels.none": "دون تعليم رسمي",
-  "education.levels.other": "نوع آخر من التعليم",
-  "year.of.birth.label": "سنة الميلاد (اختياري)",
-  "optional.fields.information.link": "معرفة المزيد عن كيفية استخدامنا لهذه المعلومات.",
-  "optional.fields.submit.button": "إرسال",
-  "optional.fields.skip.button": "التخطي مؤقتا",
-  "continue.to.platform": "المواصلة إلى {platformName}",
-  "modal.title": "شكرا لإعلامنا.",
-  "modal.description": "إن غيرت رأيك، قيمكنك إكمال ملفك الشخصي ضمن الإعدادات في أي وقت.",
-  "welcome.page.error.heading": "لم نتمكن من تحديث ملفك الشخصي",
-  "welcome.page.error.message": "حدث خطأ ما. يمكنك إكمال ملفك الشخصي ضمن الإعدادات في أي وقت."
+  "rate.limit.error": "حدث خطأ بسبب كثرة الطلبات. رجاءً حاول مرة أخرى بعد مضي بعض الوقت."
 }