1.0.0-alpha.4

Bump frontend-base to avoid the inotify handle resource starvation.

.env

@@ -1,41 +0,0 @@
-NODE_ENV='production'
-ACCESS_TOKEN_COOKIE_NAME=null
-BASE_URL=null
-CREDENTIALS_BASE_URL=null
-CSRF_TOKEN_API_PATH=null
-ECOMMERCE_BASE_URL=null
-LANGUAGE_PREFERENCE_COOKIE_NAME=null
-LMS_BASE_URL=null
-LOGIN_URL=null
-LOGOUT_URL=null
-MARKETING_SITE_BASE_URL=null
-ORDER_HISTORY_URL=null
-REFRESH_ACCESS_TOKEN_ENDPOINT=null
-SEGMENT_KEY=''
-SITE_NAME=null
-INFO_EMAIL=''
-# ***** Cookies *****
-USER_RETENTION_COOKIE_NAME=null
-# ***** 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_POST_REGISTRATION_RECOMMENDATIONS=''
-MARKETING_EMAILS_OPT_IN=''
-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=''

.env.development

@@ -19,6 +19,9 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 INFO_EMAIL='info@example.com'
+# ***** Features *****
+ENABLE_DYNAMIC_REGISTRATION_FIELDS='true'
+ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 # ***** Cookies *****
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'

.env.private.example

@@ -1,4 +0,0 @@
-# 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

@@ -1,20 +0,0 @@
-ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='http://localhost:1995'
-CREDENTIALS_BASE_URL='http://localhost:18150'
-CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
-ECOMMERCE_BASE_URL='http://localhost:18130'
-LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
-LMS_BASE_URL='http://localhost:18000'
-LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/logout'
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
-LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-MARKETING_SITE_BASE_URL='http://localhost:18000'
-ORDER_HISTORY_URL='http://localhost:1996/orders'
-REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=''
-SITE_NAME='Your Platform Name Here'
-APP_ID=''
-MFE_CONFIG_API_URL=''

.eslintignore

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

.eslintrc.js

@@ -1,52 +0,0 @@
-// 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
-    // @edx/frontend-build from v3 to v5:
-    // - TypeError: Cannot read property 'range' of null
-    indent: [
-      'error',
-      2,
-      { ignoredNodes: ['TemplateLiteral', 'SwitchCase'] },
-    ],
-    'template-curly-spacing': 'off',
-    'jsx-a11y/label-has-associated-control': ['error', {
-      labelComponents: [],
-      labelAttributes: [],
-      controlComponents: [],
-      assert: 'htmlFor',
-      depth: 25,
-    }],
-    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
-    'import/order': [
-      'error',
-      {
-        groups: [
-          'builtin',
-          'external',
-          'internal',
-          ['sibling', 'parent'],
-          'index',
-        ],
-        pathGroups: [
-          {
-            pattern: '@(react|react-dom|react-redux)',
-            group: 'external',
-            position: 'before',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['react'],
-        'newlines-between': 'always',
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
-        },
-      },
-    ],
-    'function-paren-newline': 'off',
-  },
-});

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @openedx/2U-infinity

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/pull_request_template.md

@@ -25,5 +25,5 @@ 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. 
+* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

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

@@ -10,7 +10,7 @@ on:
 jobs:
   autoupdate:
     name: autoupdate
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - uses: docker://chinthakagodawita/autoupdate-action:v1
         env:

.github/workflows/ci.yml

@@ -10,17 +10,15 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      uses: actions/checkout@v4
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
 
     - name: Install Dependencies
       run: npm ci
@@ -41,4 +39,7 @@ jobs:
       run: npm run build
 
     - name: Run Code Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.github/workflows/lockfileversion-check.yml

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

.gitignore

@@ -1,20 +1,15 @@
-.DS_Store
-.eslintcache
-.idea
 node_modules
 npm-debug.log
 coverage
 module.config.js
-.env.private
-
 dist/
+/*.tgz
+
+### i18n ###
 src/i18n/transifex_input.json
-temp/babel-plugin-react-intl
 
-### pyenv ###
-.python-version
-
-### Emacs ###
+### Editors ###
+.DS_Store
 *~
 /temp
 /.vscode

.npmignore

@@ -1,11 +1,6 @@
-.eslintignore
-.eslintrc.json
-.gitignore
-docker-compose.yml
-Dockerfile
-Makefile
-npm-debug.log
-
-coverage
+__mocks__
 node_modules
-public
+*.test.js
+*.test.jsx
+*.test.ts
+*.test.tsx

.nvmrc

@@ -1 +1 @@
-18
+20

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-authn]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

CODEOWNERS

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

Makefile

@@ -1,20 +1,17 @@
-export TRANSIFEX_RESOURCE = frontend-app-authn
-transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
-
 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
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -32,33 +29,16 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# 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) \
+	  && atlas pull $(ATLAS_OPTIONS) \
 	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/frontend-app-authn/src/i18n/messages:frontend-app-authn
 
-	$(intl_imports) paragon frontend-app-authn
-endif
+	$(intl_imports) paragon frontend-platform frontend-app-authn
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,12 +1,12 @@
+##################
+frontend-app-authn
+##################
+
 |Build Status| |ci-badge| |Codecov| |semantic-release|
 
-frontend-app-authn
-====================
-
-Please tag **@openedx/vanguards** on any PRs or issues.  Thanks!
-
-Introduction
-------------
+********
+Purpose
+********
 
 This is a micro-frontend application responsible for the login, registration and password reset functionality.
 
@@ -22,33 +22,22 @@ This is a micro-frontend application responsible for the login, registration and
 
 - Progressive profiling page
 
+***************
+Getting Started
+***************
 
 Installation
-------------
+============
 
-This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
+`Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
 
-1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
-
-2. Start up LMS, if it's not already started.
-
-4. Within this project (frontend-app-authn), install requirements and start the development server:
-
-   .. code-block::
-
-      npm install
-      npm start # The server will run on port 1999
-
-5. Once the dev server is up, visit http://localhost:1999 to access the MFE
-
-   .. image:: ./docs/images/frontend-app-authn-localhost-preview.png
-
-   **Note:** Follow `Enable social auth locally <docs/how_tos/enable_social_auth.rst>`_ for enabling Social Sign-on Buttons (SSO) locally
+.. _Tutor: https://github.com/overhangio/tutor
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
 
 Environment Variables/Setup Notes
----------------------------------
+=================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
 
 The authentication micro-frontend also requires the following additional variable:
 
@@ -112,9 +101,13 @@ The authentication micro-frontend also requires the following additional variabl
      - 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`` | ``''``
 
+   * - ``ENABLE_IMAGE_LAYOUT``
+     - Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the `Modifying base container <docs/how_tos/modifying_base_container.rst>`_.
+     - ``true`` | ``''`` (empty strings are falsy)
+
 
 edX-specific Environment Variables
-**********************************
+==================================
 
 Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and might be unsupported in Open edX.
 
@@ -130,17 +123,14 @@ 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>`__.
+edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
 
 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>`_.
+put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
 
 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
 
@@ -149,34 +139,58 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend
 
 This project is currently accepting all types of contributions, bug fixes and security fixes.
 
-Open edX Code of Conduct
-------------------------
+Getting Help
+============
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-authn/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+The 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``
+found in `Backstage <https://backstage.openedx.org/catalog/default/group/2u-infinity>`_. 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.
+Please do not report security issues in public. Please email security@openedx.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.
 
+
 ==============================
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-authn.svg?branch=master
@@ -187,4 +201,4 @@ Please see `LICENSE <https://github.com/openedx/frontend-app-authn/blob/master/L
    :target: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml
    :alt: Continuous Integration
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release

app.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="@openedx/frontend-base" />
+
+declare module 'site.config' {
+  export default SiteConfig;
+}

babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@openedx/frontend-base/config');
+
+module.exports = createConfig('babel');

catalog-info.yaml

@@ -12,7 +12,8 @@ metadata:
       icon: 'Article'
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
-  owner: group:vanguards
+  owner: group:2u-infinity
   type: 'service'
   lifecycle: 'production'

docs/how_tos/enable_social_auth.rst

@@ -3,7 +3,7 @@ Enable Social Auth Locally
 
 Please follow the steps below to enable social auth (SSO) locally.
 
-1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
 
 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
 

docs/how_tos/modifying_base_container.rst

@@ -0,0 +1,39 @@
+========================================
+Modifying the Base Container in Authn
+========================================
+
+The base container in Authn serves as the fundamental layout structure for rendering different components based on configurations. This document outlines the process for modifying the base container to accommodate changes or customize layouts as needed.
+
+Understanding Base Container Versions
+--------------------------------------
+
+The base container supports two main versions:
+
+- **Default Layout:** The default layout is the standard layout used when specific configurations do not dictate otherwise.
+.. image:: ../images/default_layout.png
+- **Image Layout:** The image layout is an alternative layout option that can be enabled based on configurations.
+.. image:: ../images/image_layout.png
+
+Enabling the Image Layout
+---------------------------
+
+To activate the image layout feature, navigate to your .env file and update the configurations:
+
+**Update Configuration**
+
+Locate the ``ENABLE_IMAGE_LAYOUT`` parameter and set its value to  ``true``. Additionally, ensure that the Image configuration settings are provided. Your overall configurations should resemble the following:
+
+
+   .. code-block::
+
+      # ***** Image Layout Configuration *****
+      ENABLE_IMAGE_LAYOUT = True  # Set to True to enable image layout feature
+
+      # ***** Base Container Images *****
+      BANNER_IMAGE_LARGE='' # Path to the large banner image
+      BANNER_IMAGE_MEDIUM='' # Path to the medium-sized banner image
+      BANNER_IMAGE_SMALL=''  # Path to the small banner image
+      BANNER_IMAGE_EXTRA_SMALL=''  # Path to the extra-small banner image
+
+
+This allows for the customization and adaptation of the base container layout according to specific requirements.

eslint.config.js

@@ -0,0 +1,22 @@
+// @ts-check
+
+const { createLintConfig } = require('@openedx/frontend-base/config');
+
+module.exports = createLintConfig(
+  {
+    files: [
+      'src/**/*',
+      'site.config.*',
+    ],
+  },
+  {
+    ignores: [
+      'coverage/*',
+      'dist/*',
+      'docs/*',
+      'node_modules/*',
+      '**/__mocks__/*',
+      '**/__snapshots__/*',
+    ],
+  },
+);

jest.config.js

@@ -1,14 +1,15 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-base/config');
 
-module.exports = createConfig('jest', {
-  setupFiles: [
+module.exports = createConfig('test', {
+  setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [
     'src/setupTest.js',
     'src/i18n',
-    'src/index.jsx',
-    'MainApp.jsx',
   ],
-  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
+  },
 });

openedx.yaml

@@ -1,8 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: Authn MFE
-oeps: {}
-owner: openedx/vanguards
-openedx-release:
-  ref: master

package.json

@@ -1,28 +1,31 @@
 {
-  "name": "@edx/frontend-app-authn",
-  "version": "0.1.0",
-  "description": "Frontend application template",
+  "name": "@openedx/frontend-app-authn",
+  "version": "1.0.0-alpha.4",
+  "description": "Frontend authentication",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-app-authn.git"
   },
+  "main": "src/index.ts",
+  "files": [
+    "/src"
+  ],
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "scripts": {
-    "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
-    "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "dev": "PORT=1999 PUBLIC_PATH=/authn openedx dev",
+    "i18n_extract": "openedx formatjs extract",
+    "lint": "openedx lint .",
+    "lint:fix": "openedx lint --fix .",
+    "snapshot": "openedx test --updateSnapshot",
+    "test": "openedx test --coverage --passWithNoTests"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
-  "author": "edX",
+  "author": "Open edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
   "publishConfig": {
@@ -32,55 +35,45 @@
     "url": "https://github.com/openedx/frontend-app-authn/issues"
   },
   "dependencies": {
-    "@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",
-    "@optimizely/react-sdk": "^2.9.1",
-    "@redux-devtools/extension": "3.2.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.14.0",
-    "classnames": "2.3.2",
-    "core-js": "3.32.0",
-    "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.0",
-    "prop-types": "15.8.1",
-    "query-string": "7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.3.1",
-    "react-redux": "7.2.9",
-    "react-responsive": "8.2.0",
-    "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.3",
-    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.0",
-    "reselect": "4.1.8",
-    "universal-cookie": "4.0.4"
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+    "@edx/openedx-atlas": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@redux-devtools/extension": "^3.3.0",
+    "classnames": "^2.5.1",
+    "fastest-levenshtein": "^1.0.16",
+    "form-urlencoded": "^6.1.5",
+    "i18n-iso-countries": "^7.13.0",
+    "prop-types": "^15.8.1",
+    "query-string": "^7.1.3",
+    "react-helmet": "^6.1.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-responsive": "^8.2.0",
+    "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.5",
+    "redux-saga": "^1.3.0",
+    "redux-thunk": "^2.4.2",
+    "reselect": "^5.1.1",
+    "universal-cookie": "^8.0.1"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.8",
-    "@edx/reactifex": "1.1.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "babel-plugin-formatjs": "10.5.3",
-    "enzyme": "3.11.0",
-    "eslint-plugin-import": "2.28.0",
-    "glob": "7.2.3",
-    "history": "5.3.0",
-    "husky": "7.0.4",
-    "jest": "29.6.2",
-    "react-test-renderer": "^17.0.2"
+    "@edx/browserslist-config": "^1.5.0",
+    "@testing-library/react": "^16.3.0",
+    "babel-plugin-formatjs": "10.5.38",
+    "eslint-plugin-import": "2.31.0",
+    "jest": "^29.7.0",
+    "react-test-renderer": "^18.3.1"
+  },
+  "peerDependencies": {
+    "@openedx/frontend-base": "^1.0.0-alpha.6",
+    "@openedx/paragon": "^22",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-redux": "^8",
+    "react-router": "^6",
+    "react-router-dom": "^6",
+    "redux": "^4"
   }
 }

public/index.html

@@ -1,23 +1,9 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Authn | <%= process.env.SITE_NAME %></title>
+      <title>Authentication Development Site></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 %>"
-        ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

site.config.dev.tsx

@@ -0,0 +1,20 @@
+import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
+
+import { authnApp } from './src';
+
+import './src/app.scss';
+
+const siteConfig: SiteConfig = {
+  siteId: 'authn-dev',
+  siteName: 'Authn Dev',
+  baseUrl: 'http://apps.local.openedx.io:8080',
+  lmsBaseUrl: 'http://local.openedx.io:8000',
+  loginUrl: 'http://local.openedx.io:8000/login',
+  logoutUrl: 'http://local.openedx.io:8000/logout',
+
+  environment: EnvironmentTypes.DEVELOPMENT,
+  basename: '/authn',
+  apps: [authnApp],
+};
+
+export default siteConfig;

site.config.test.tsx

@@ -0,0 +1,50 @@
+import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
+
+import { appId } from './src/constants';
+
+const siteConfig: SiteConfig = {
+  siteId: 'test-site',
+  siteName: 'Test Site',
+  baseUrl: 'http://localhost:1996',
+  lmsBaseUrl: 'http://localhost:8000',
+  loginUrl: 'http://localhost:8000/login',
+  logoutUrl: 'http://localhost:8000/logout',
+
+  environment: EnvironmentTypes.TEST,
+  apps: [{
+    appId,
+    config: {
+      ACTIVATION_EMAIL_SUPPORT_LINK: null,
+      ALLOW_PUBLIC_ACCOUNT_CREATION: false,
+      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
+      BANNER_IMAGE_EXTRA_SMALL: '',
+      BANNER_IMAGE_LARGE: '',
+      BANNER_IMAGE_MEDIUM: '',
+      BANNER_IMAGE_SMALL: '',
+      DISABLE_ENTERPRISE_LOGIN: true,
+      ENABLE_AUTO_GENERATED_USERNAME: false,
+      ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
+      ENABLE_IMAGE_LAYOUT: false,
+      ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
+      FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+      INFO_EMAIL: '',
+      LOGIN_ISSUE_SUPPORT_LINK: null,
+      LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+      LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+      LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+      MARKETING_EMAILS_OPT_IN: '',
+      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+      PASSWORD_RESET_SUPPORT_LINK: null,
+      POST_REGISTRATION_REDIRECT_URL: '',
+      PRIVACY_POLICY: null,
+      SEARCH_CATALOG_URL: null,
+      SESSION_COOKIE_DOMAIN: 'local.openedx.io',
+      SHOW_REGISTRATION_LINKS: false,
+      TOS_AND_HONOR_CODE: null,
+      TOS_LINK: null,
+      USER_RETENTION_COOKIE_NAME: '',
+    },
+  }],
+};
+
+export default siteConfig;

src/Main.tsx

@@ -0,0 +1,23 @@
+import { Provider as ReduxProvider } from 'react-redux';
+import { Outlet } from 'react-router-dom';
+import { CurrentAppProvider } from '@openedx/frontend-base';
+
+import { appId } from './constants';
+import {
+  registerIcons,
+} from './common-components';
+import configureStore from './data/configureStore';
+
+import './sass/_style.scss';
+
+registerIcons();
+
+const Main = () => (
+  <CurrentAppProvider appId={appId}>
+    <ReduxProvider store={configureStore()}>
+      <Outlet />
+    </ReduxProvider>
+  </CurrentAppProvider>
+);
+
+export default Main;

src/MainApp.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { Helmet } from 'react-helmet';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import {
-  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
-} from './common-components';
-import configureStore from './data/configureStore';
-import {
-  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 Logistration from './logistration/Logistration';
-import { ProgressiveProfiling } from './progressive-profiling';
-import { RecommendationsPage } from './recommendations';
-import { RegistrationPage } from './register';
-import { ResetPasswordPage } from './reset-password';
-
-import './index.scss';
-
-registerIcons();
-
-const MainApp = () => (
-  <AppProvider store={configureStore()}>
-    <Helmet>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-    {getConfig().ZENDESK_KEY && <Zendesk />}
-    <Routes>
-      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
-      <Route
-        path={REGISTER_EMBEDDED_PAGE}
-        element={<EmbeddedRegistrationRoute><RegistrationPage /></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>
-);
-
-export default MainApp;

src/__mocks__/file.js

@@ -0,0 +1 @@
+module.exports = 'FileMock';

src/__mocks__/svg.js

@@ -0,0 +1 @@
+module.exports = 'SvgURL';

src/app.scss

@@ -0,0 +1,6 @@
+@use "@edx/brand/paragon/fonts";
+@use "@edx/brand/paragon/variables";
+@use "@openedx/paragon/scss/core/core";
+@use "@edx/brand/paragon/overrides";
+
+@use "sass/style";

src/app.ts

@@ -0,0 +1,43 @@
+import { App } from '@openedx/frontend-base';
+import { appId } from './constants';
+import routes from './routes';
+import messages from './i18n';
+
+const app: App = {
+  appId,
+  routes,
+  messages,
+  config: {
+    ACTIVATION_EMAIL_SUPPORT_LINK: null,
+    ALLOW_PUBLIC_ACCOUNT_CREATION: true,
+    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: null,
+    BANNER_IMAGE_EXTRA_SMALL: '',
+    BANNER_IMAGE_LARGE: '',
+    BANNER_IMAGE_MEDIUM: '',
+    BANNER_IMAGE_SMALL: '',
+    DISABLE_ENTERPRISE_LOGIN: true,
+    ENABLE_AUTO_GENERATED_USERNAME: false,
+    ENABLE_DYNAMIC_REGISTRATION_FIELDS: false,
+    ENABLE_IMAGE_LAYOUT: false,
+    ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: false,
+    FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+    INFO_EMAIL: '',
+    LOGIN_ISSUE_SUPPORT_LINK: null,
+    LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+    LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+    LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+    MARKETING_EMAILS_OPT_IN: '',
+    MARKETING_SITE_BASE_URL: 'http://local.openedx.io',
+    PASSWORD_RESET_SUPPORT_LINK: null,
+    POST_REGISTRATION_REDIRECT_URL: '',
+    PRIVACY_POLICY: null,
+    SEARCH_CATALOG_URL: null,
+    SESSION_COOKIE_DOMAIN: 'local.openedx.io',
+    SHOW_REGISTRATION_LINKS: true,
+    TOS_AND_HONOR_CODE: null,
+    TOS_LINK: null,
+    USER_RETENTION_COOKIE_NAME: '',
+  },
+};
+
+export default app;

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

@@ -1,50 +1,48 @@
-import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import { IntlProvider } from '@openedx/frontend-base';
+import { render, screen } from '@testing-library/react';
 
 import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
 
 describe('Default Layout tests', () => {
   it('should display the form passed as a child in SmallScreenLayout', () => {
-    const smallScreen = mount(
+    render(
       <IntlProvider locale="en">
         <div>
           <DefaultSmallLayout />
-          <form>
+          <form aria-label="form">
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(smallScreen.find('form').exists()).toEqual(true);
+    expect(screen.getByRole('form')).toBeDefined();
   });
 
   it('should display the form passed as a child in MediumScreenLayout', () => {
-    const mediumScreen = mount(
+    render(
       <IntlProvider locale="en">
         <div>
           <DefaultMediumLayout />
-          <form>
+          <form aria-label="form">
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(mediumScreen.find('form').exists()).toEqual(true);
+    expect(screen.getByRole('form')).toBeDefined();
   });
 
   it('should display the form passed as a child in LargeScreenLayout', () => {
-    const largeScreen = mount(
+    render(
       <IntlProvider locale="en">
         <div>
           <DefaultLargeLayout />
-          <form>
+          <form aria-label="form">
             <input type="text" />
           </form>
         </div>
       </IntlProvider>,
     );
-    expect(largeScreen.find('form').exists()).toEqual(true);
+    expect(screen.getByRole('form')).toBeDefined();
   });
 });

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -13,20 +10,20 @@ const LargeLayout = () => {
   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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().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' })} />
+          <div className={classNames({ 'large-yellow-line mr-n4.5': getSiteConfig().siteName === 'edX' })} />
           <h1
             className={classNames(
               'display-2 text-white mw-xs',
-              { 'ml-6': getConfig().SITE_NAME !== 'edX' },
+              { 'ml-6': getSiteConfig().siteName !== 'edX' },
             )}
           >
             {formatMessage(messages['start.learning'])}
             <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
             </div>
           </h1>
         </div>

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -15,21 +12,23 @@ const MediumLayout = () => {
       <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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+            <Image alt={getSiteConfig().siteName} className="logo" src={useAppConfig().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 className={classNames({ 'mt-1 medium-yellow-line': getSiteConfig().siteName === 'edX' })} />
             <div>
               <h1
                 className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2',
-                  { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
+                  { 'ml-4.5': getSiteConfig().siteName !== '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>
+                  {formatMessage(messages['start.learning'])}{' '}
+                  <span className="text-accent-a d-inline-block">
+                    {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
+                  </span>
                 </span>
               </h1>
             </div>

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import messages from './messages';
@@ -14,20 +11,21 @@ const SmallLayout = () => {
     <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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().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' })} />
+        <div className="d-flex align-items-center m-3.5">
+          <div className={classNames({ 'small-yellow-line mr-n2.5': getSiteConfig().siteName === '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>
+              {formatMessage(messages['start.learning'])}{' '}
+              <span className="text-accent-a d-inline-block">
+                {formatMessage(messages['with.site.name'], { siteName: getSiteConfig().siteName })}
+              </span>
             </span>
           </h1>
         </div>

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

@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   'start.learning': {

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
 
@@ -12,10 +9,10 @@ const ExtraSmallLayout = () => {
   return (
     <span
       className="w-100 bg-primary-500 banner__image extra-small-layout"
-      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+      style={{ backgroundImage: `url(${useAppConfig().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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
         <h1 className="banner__heading">

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
 import messages from './messages';
@@ -13,10 +10,10 @@ const LargeLayout = () => {
   return (
     <div
       className="w-50 bg-primary-500 banner__image large-layout"
-      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_LARGE})` }}
+      style={{ backgroundImage: `url(${useAppConfig().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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().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">

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import './index.scss';
 import messages from './messages';
@@ -13,10 +10,10 @@ const MediumLayout = () => {
   return (
     <div
       className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
-      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_MEDIUM})` }}
+      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_MEDIUM})` }}
     >
-      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-5 pb-4 pt-4">
         <h1 className="display-2 banner__heading">

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

@@ -1,8 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 
 import messages from './messages';
 
@@ -12,10 +9,10 @@ const SmallLayout = () => {
   return (
     <span
       className="w-100 bg-primary-500 banner__image small-layout"
-      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_SMALL})` }}
+      style={{ backgroundImage: `url(${useAppConfig().BANNER_IMAGE_SMALL})` }}
     >
-      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
-        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      <Hyperlink destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_WHITE_URL} />
       </Hyperlink>
       <div className="ml-5 mr-1 pb-3.5 pt-3.5">
         <h1 className="display-2">

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

@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   'your.career.turning.point': {

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

@@ -1,26 +1,23 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const LargeLayout = ({ username }) => {
+const LargeLayout = ({ fullName }) => {
   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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+          <Image className="logo position-absolute" alt={getSiteConfig().siteName} src={useAppConfig().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 })}
+              {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
             </h1>
             <h2 className="complete-your-profile">
               {formatMessage(messages['complete.your.profile.1'])}
@@ -43,7 +40,7 @@ const LargeLayout = ({ username }) => {
 };
 
 LargeLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default LargeLayout;

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

@@ -1,13 +1,10 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const MediumLayout = ({ username }) => {
+const MediumLayout = ({ fullName }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -15,14 +12,14 @@ const MediumLayout = ({ 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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+            <Image className="logo" alt={getSiteConfig().siteName} src={useAppConfig().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 })}
+                {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
               </h1>
               <h2 className="display-1">
                 {formatMessage(messages['complete.your.profile.1'])}
@@ -46,7 +43,7 @@ const MediumLayout = ({ username }) => {
 };
 
 MediumLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default MediumLayout;

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

@@ -1,26 +1,23 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Image } from '@edx/paragon';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Hyperlink, Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const SmallLayout = ({ username }) => {
+const SmallLayout = ({ fullName }) => {
   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 destination={useAppConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="logo-small" alt={getSiteConfig().siteName} src={useAppConfig().LOGO_URL} />
       </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+      <div className="d-flex align-items-center m-3.5">
         <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 })}
+            {formatMessage(messages['welcome.to.platform'], { siteName: getSiteConfig().siteName, fullName })}
           </h1>
           <h2 className="h1">
             {formatMessage(messages['complete.your.profile.1'])}
@@ -35,7 +32,7 @@ const SmallLayout = ({ username }) => {
 };
 
 SmallLayout.propTypes = {
-  username: PropTypes.string.isRequired,
+  fullName: PropTypes.string.isRequired,
 };
 
 export default SmallLayout;

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

@@ -1,9 +1,9 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   'welcome.to.platform': {
     id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
+    defaultMessage: 'Welcome to {siteName}, {fullName}!',
     description: 'Welcome message that appears on progressive profile page',
   },
   'complete.your.profile.1': {

src/base-container/data/constants.js

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

src/base-container/index.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
-
-import { breakpoints } from '@edx/paragon';
+import { useAppConfig } from '@openedx/frontend-base';
+import { breakpoints } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
@@ -10,40 +9,24 @@ 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, username }) => {
-  const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);
+const BaseContainer = ({ children, showWelcomeBanner, fullName }) => {
+  const enableImageLayout = useAppConfig().ENABLE_IMAGE_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) {
+  if (enableImageLayout) {
     return (
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageExtraSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <ImageSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <ImageMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <ImageLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -57,13 +40,13 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => {
       <div className="col-md-12 extra-large-screen-top-stripe" />
       <div className="layout">
         <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
+          {showWelcomeBanner ? <AuthSmallLayout fullName={fullName} /> : <DefaultSmallLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
+          {showWelcomeBanner ? <AuthMediumLayout fullName={fullName} /> : <DefaultMediumLayout />}
         </MediaQuery>
         <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
-          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
+          {showWelcomeBanner ? <AuthLargeLayout fullName={fullName} /> : <DefaultLargeLayout />}
         </MediaQuery>
         <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
           {children}
@@ -75,13 +58,13 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => {
 
 BaseContainer.defaultProps = {
   showWelcomeBanner: false,
-  username: null,
+  fullName: null,
 };
 
 BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
   showWelcomeBanner: PropTypes.bool,
-  username: PropTypes.string,
+  fullName: PropTypes.string,
 };
 
 export default BaseContainer;

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

@@ -1,10 +1,9 @@
-import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import { IntlProvider, mergeAppConfig } from '@openedx/frontend-base';
+import { render } from '@testing-library/react';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import BaseContainer from '../index';
+import { appId } from '../../constants';
 
 const LargeScreen = {
   wrappingComponent: ResponsiveContext.Provider,
@@ -12,32 +11,34 @@ const LargeScreen = {
 };
 
 describe('Base component tests', () => {
-  it('should should default layout', () => {
-    const baseContainer = mount(
+  it('should show default layout', () => {
+    const { container } = render(
       <IntlProvider locale="en">
-        <BaseContainer />
+        <BaseContainer>
+          <div>Test Content</div>
+        </BaseContainer>
       </IntlProvider>,
       LargeScreen,
     );
 
-    expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
-    expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
+    expect(container.querySelector('.banner__image')).toBeNull();
+    expect(container.querySelector('.large-screen-svg-primary')).toBeDefined();
   });
 
-  it('[experiment] should show image layout for treatment group', () => {
-    window.experiments = {
-      rebrandExperiment: {
-        variation: 'image-layout',
-      },
-    };
+  it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => {
+    mergeAppConfig(appId, {
+      ENABLE_IMAGE_LAYOUT: true,
+    });
 
-    const baseContainer = mount(
+    const { container } = render(
       <IntlProvider locale="en">
-        <BaseContainer />
+        <BaseContainer showWelcomeBanner={false}>
+          <div>Test Content</div>
+        </BaseContainer>
       </IntlProvider>,
       LargeScreen,
     );
 
-    expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
+    expect(container.querySelector('.banner__image')).toBeDefined();
   });
 });

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 

src/common-components/EnterpriseSSO.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
 import {
   Button, Form,
   Icon,
-} from '@edx/paragon';
-import { Login } from '@edx/paragon/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+} from '@openedx/paragon';
+import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import messages from './messages';
 
 /**
  * This component renders the Single sign-on (SSO) button only for the tpa provider passed
@@ -19,11 +16,12 @@ import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
 const EnterpriseSSO = (props) => {
   const { formatMessage } = useIntl();
   const tpaProvider = props.provider;
-  const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
+  const hideRegistrationLink = useAppConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false
+    || useAppConfig().SHOW_REGISTRATION_LINKS === false;
 
   const handleSubmit = (e, url) => {
     e.preventDefault();
-    window.location.href = getConfig().LMS_BASE_URL + url;
+    window.location.href = getSiteConfig().lmsBaseUrl + url;
   };
 
   const handleClick = (e) => {
@@ -49,7 +47,7 @@ const EnterpriseSSO = (props) => {
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
                     <img className="btn-tpa__image-icon" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
-                    <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
+                    <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
                   </div>
                 )
                   : (
@@ -61,7 +59,7 @@ const EnterpriseSSO = (props) => {
                             <Icon className="h-75" src={Login} />
                           )}
                       </div>
-                      <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
+                      <span className="pl-2" aria-hidden="true">{tpaProvider.name}</span>
                     </>
                   )}
               </Button>
@@ -74,7 +72,7 @@ const EnterpriseSSO = (props) => {
                 className="w-100"
                 onClick={(e) => handleClick(e)}
               >
-                {disablePublicAccountCreation
+                {hideRegistrationLink
                   ? formatMessage(messages['enterprisetpa.login.button.text.public.account.creation.disabled'])
                   : formatMessage(messages['enterprisetpa.login.button.text'])}
               </Button>

src/common-components/FormGroup.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import {
   Form, TransitionReplace,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {

src/common-components/InstitutionLogistration.jsx

@@ -1,9 +1,6 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink, Icon } from '@edx/paragon';
-import { Institution } from '@edx/paragon/icons';
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Button, Hyperlink, Icon } from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
@@ -31,7 +28,7 @@ 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 lmsBaseUrl = getSiteConfig().lmsBaseUrl;
   const { formatMessage } = useIntl();
   const {
     secondaryProviders,

src/common-components/NotFoundPage.jsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@openedx/frontend-base';
 
 const NotFoundPage = () => (
   <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">

src/common-components/PasswordField.jsx

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 import {
   Form, Icon, IconButton, OverlayTrigger, Tooltip, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   Check, Remove, Visibility, VisibilityOff,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import messages from './messages';
 import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
 import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
 import { validatePasswordField } from '../register/data/utils';
+import messages from './messages';
 
 const PasswordField = (props) => {
   const { formatMessage } = useIntl();
@@ -138,7 +138,7 @@ const PasswordField = (props) => {
       {props.errorMessage !== '' && (
         <Form.Control.Feedback key="error" className="form-text-size" hasIcon={false} feedback-for={props.name} type="invalid">
           {props.errorMessage}
-          <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>
+          {props.showScreenReaderText && <span className="sr-only">{formatMessage(messages['password.sr.only.helping.text'])}</span>}
         </Form.Control.Feedback>
       )}
     </Form.Group>
@@ -153,6 +153,7 @@ PasswordField.defaultProps = {
   handleChange: () => {},
   handleErrorChange: null,
   showRequirements: true,
+  showScreenReaderText: true,
   autoComplete: null,
 };
 
@@ -168,6 +169,7 @@ PasswordField.propTypes = {
   showRequirements: PropTypes.bool,
   value: PropTypes.string.isRequired,
   autoComplete: PropTypes.string,
+  showScreenReaderText: PropTypes.bool,
 };
 
 export default PasswordField;

src/common-components/RedirectLogistration.jsx

@@ -1,9 +1,9 @@
-import { getConfig } from '@edx/frontend-platform';
+import { useAppConfig, getSiteConfig } from '@openedx/frontend-base';
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 
 import {
-  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
+  AUTHN_PROGRESSIVE_PROFILING, REDIRECT,
 } from '../data/constants';
 import { setCookie } from '../data/utils';
 
@@ -15,7 +15,6 @@ const RedirectLogistration = (props) => {
     redirectToProgressiveProfilingPage,
     success,
     optionalFields,
-    redirectToRecommendationsPage,
     educationLevel,
     userId,
     registrationEmbedded,
@@ -29,7 +28,7 @@ const RedirectLogistration = (props) => {
     // Note: For multiple enterprise use case, we need to make sure that user first visits the
     // enterprise selection page and then complete the auth workflow
     if (finishAuthUrl && !redirectUrl.includes(finishAuthUrl)) {
-      finalRedirectUrl = getConfig().LMS_BASE_URL + finishAuthUrl;
+      finalRedirectUrl = getSiteConfig().lmsBaseUrl + finishAuthUrl;
     } else {
       finalRedirectUrl = redirectUrl;
     }
@@ -37,12 +36,12 @@ const RedirectLogistration = (props) => {
     // Redirect to Progressive Profiling after successful registration
     if (redirectToProgressiveProfilingPage) {
       // TODO: Do we still need this cookie?
-      setCookie('van-504-returning-user', true);
+      setCookie('van-504-returning-user', true, useAppConfig().SESSION_COOKIE_DOMAIN);
 
       if (registrationEmbedded) {
         window.parent.postMessage({
           action: REDIRECT,
-          redirectUrl: getConfig().POST_REGISTRATION_REDIRECT_URL,
+          redirectUrl: useAppConfig().POST_REGISTRATION_REDIRECT_URL,
         }, host);
         return null;
       }
@@ -60,22 +59,6 @@ const RedirectLogistration = (props) => {
       );
     }
 
-    // Redirect to Recommendation page
-    if (redirectToRecommendationsPage) {
-      const registrationResult = { redirectUrl: finalRedirectUrl, success };
-      return (
-        <Navigate
-          to={RECOMMENDATIONS}
-          state={{
-            registrationResult,
-            educationLevel,
-            userId,
-          }}
-          replace
-        />
-      );
-    }
-
     window.location.href = finalRedirectUrl;
   }
 
@@ -90,7 +73,6 @@ RedirectLogistration.defaultProps = {
   redirectUrl: '',
   redirectToProgressiveProfilingPage: false,
   optionalFields: {},
-  redirectToRecommendationsPage: false,
   userId: null,
   registrationEmbedded: false,
   host: '',
@@ -104,7 +86,6 @@ RedirectLogistration.propTypes = {
   redirectUrl: PropTypes.string,
   redirectToProgressiveProfilingPage: PropTypes.bool,
   optionalFields: PropTypes.shape({}),
-  redirectToRecommendationsPage: PropTypes.bool,
   userId: PropTypes.number,
   registrationEmbedded: PropTypes.bool,
   host: PropTypes.string,

src/common-components/SocialAuthProviders.jsx

@@ -1,14 +1,11 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-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 { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Icon } from '@openedx/paragon';
+import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import messages from './messages';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
@@ -18,7 +15,7 @@ const SocialAuthProviders = (props) => {
     e.preventDefault();
 
     const url = e.currentTarget.dataset.providerUrl;
-    window.location.href = getConfig().LMS_BASE_URL + url;
+    window.location.href = getSiteConfig().lmsBaseUrl + url;
   }
 
   const socialAuth = socialAuthProviders.map((provider, index) => (

src/common-components/ThirdPartyAuth.jsx

@@ -0,0 +1,123 @@
+import { useAppConfig, getSiteConfig, useIntl } from '@openedx/frontend-base';
+import {
+  Hyperlink, Icon,
+} from '@openedx/paragon';
+import { Institution } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Skeleton from 'react-loading-skeleton';
+
+import {
+  ENTERPRISE_LOGIN_URL, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
+} from '../data/constants';
+import messages from './messages';
+
+import {
+  RenderInstitutionButton,
+  SocialAuthProviders,
+} from './index';
+
+/**
+ * This component renders the Single sign-on (SSO) buttons for the providers passed.
+ * */
+const ThirdPartyAuth = (props) => {
+  const { formatMessage } = useIntl();
+  const {
+    providers,
+    secondaryProviders,
+    currentProvider,
+    handleInstitutionLogin,
+    thirdPartyAuthApiStatus,
+    isLoginPage,
+  } = props;
+  const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
+  const isSocialAuthActive = !!providers.length && !currentProvider;
+  const isEnterpriseLoginDisabled = useAppConfig().DISABLE_ENTERPRISE_LOGIN;
+  const enterpriseLoginURL = getSiteConfig().lmsBaseUrl + ENTERPRISE_LOGIN_URL;
+  const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
+
+  return (
+    <>
+      {((isEnterpriseLoginDisabled && isInstitutionAuthActive) || isSocialAuthActive) && (
+        <div className="mt-4 mb-3 h4">
+          {isLoginPage
+            ? formatMessage(messages['login.other.options.heading'])
+            : formatMessage(messages['registration.other.options.heading'])}
+        </div>
+      )}
+      {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && (
+        <Hyperlink
+          className={classNames(
+            'btn btn-link btn-sm text-body p-0',
+            { 'mb-0': thirdPartyAuthApiStatus === PENDING_STATE },
+            { 'mb-4': thirdPartyAuthApiStatus !== PENDING_STATE },
+          )}
+          destination={enterpriseLoginURL}
+        >
+          <Icon src={Institution} className="institute-icon" />
+          {formatMessage(messages['enterprise.login.btn.text'])}
+        </Hyperlink>
+      )}
+
+      {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
+        <div className="mt-4">
+          <Skeleton className="tpa-skeleton" height={36} count={2} />
+        </div>
+      ) : (
+        <>
+          {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (
+            <RenderInstitutionButton
+              onSubmitHandler={handleInstitutionLogin}
+              buttonTitle={formatMessage(messages['institution.login.button'])}
+            />
+          )}
+          {isSocialAuthActive && (
+            <div className="row m-0">
+              <SocialAuthProviders
+                socialAuthProviders={providers}
+                referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+ThirdPartyAuth.defaultProps = {
+  currentProvider: null,
+  providers: [],
+  secondaryProviders: [],
+  thirdPartyAuthApiStatus: PENDING_STATE,
+  isLoginPage: false,
+};
+
+ThirdPartyAuth.propTypes = {
+  currentProvider: PropTypes.string,
+  handleInstitutionLogin: PropTypes.func.isRequired,
+  providers: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+      iconClass: PropTypes.string,
+      iconImage: PropTypes.string,
+      loginUrl: PropTypes.string,
+      registerUrl: PropTypes.string,
+    }),
+  ),
+  secondaryProviders: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+      iconClass: PropTypes.string,
+      iconImage: PropTypes.string,
+      loginUrl: PropTypes.string,
+      registerUrl: PropTypes.string,
+    }),
+  ),
+  thirdPartyAuthApiStatus: PropTypes.string,
+  isLoginPage: PropTypes.bool,
+};
+
+export default ThirdPartyAuth;

src/common-components/ThirdPartyAuthAlert.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import messages from './messages';
 
 const ThirdPartyAuthAlert = (props) => {
   const { formatMessage } = useIntl();
   const { currentProvider, referrer } = props;
-  const platformName = getConfig().SITE_NAME;
+  const platformName = getSiteConfig().siteName;
   let message;
 
   if (referrer === LOGIN_PAGE) {
@@ -30,7 +27,7 @@ const ThirdPartyAuthAlert = (props) => {
         {referrer === REGISTER_PAGE ? (
           <Alert.Heading>{formatMessage(messages['tpa.alert.heading'])}</Alert.Heading>
         ) : null}
-        <p>{ message }</p>
+        <p>{message}</p>
       </Alert>
       {referrer === REGISTER_PAGE ? (
         <h4 className="mt-4 mb-4">{formatMessage(messages['registration.using.tpa.form.heading'])}</h4>

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { getConfig } from '@edx/frontend-platform';
-import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { fetchAuthenticatedUser, getAuthenticatedUser, getSiteConfig } from '@openedx/frontend-base';
 import PropTypes from 'prop-types';
 
 import {
@@ -25,7 +24,7 @@ const UnAuthOnlyRoute = ({ children }) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+      global.location.href = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
       return null;
     }
 

src/common-components/Zendesk.jsx

@@ -1,61 +0,0 @@
-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/reducers.js

@@ -2,9 +2,7 @@ import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } fr
 import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
 
 export const defaultState = {
-  fieldDescriptions: {
-    fields: {},
-  },
+  fieldDescriptions: {},
   optionalFields: {
     fields: {},
     extended_profile: [],
@@ -33,7 +31,7 @@ const reducer = (state = defaultState, action = {}) => {
     case THIRD_PARTY_AUTH_CONTEXT.SUCCESS: {
       return {
         ...state,
-        fieldDescriptions: action.payload.fieldDescriptions.fields,
+        fieldDescriptions: action.payload.fieldDescriptions?.fields,
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,

src/common-components/data/sagas.js

@@ -1,6 +1,7 @@
-import { logError } from '@edx/frontend-platform/logging';
+import { logError } from '@openedx/frontend-base';
 import { call, put, takeEvery } from 'redux-saga/effects';
 
+import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 import {
   getThirdPartyAuthContextBegin,
   getThirdPartyAuthContextFailure,
@@ -10,7 +11,6 @@ import {
 import {
   getThirdPartyAuthContext,
 } from './service';
-import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
 
 export function* fetchThirdPartyAuthContext(action) {
   try {

src/common-components/data/service.js

@@ -1,7 +1,5 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
 
-// eslint-disable-next-line import/prefer-default-export
 export async function getThirdPartyAuthContext(urlParams) {
   const requestConfig = {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
@@ -11,7 +9,7 @@ export async function getThirdPartyAuthContext(urlParams) {
 
   const { data } = await getAuthenticatedHttpClient()
     .get(
-      `${getConfig().LMS_BASE_URL}/api/mfe_context`,
+      `${getSiteConfig().lmsBaseUrl}/api/mfe_context`,
       requestConfig,
     )
     .catch((e) => {

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

@@ -1,12 +1,12 @@
 import { runSaga } from 'redux-saga';
 
 import { setCountryFromThirdPartyAuthContext } from '../../../register/data/actions';
-import initializeMockLogging from '../../../setupTest';
+import { initializeMockServices } from '../../../setupTest';
 import * as actions from '../actions';
 import { fetchThirdPartyAuthContext } from '../sagas';
 import * as api from '../service';
 
-const { loggingService } = initializeMockLogging();
+const { loggingService } = initializeMockServices();
 
 describe('fetchThirdPartyAuthContext', () => {
   const params = {

src/common-components/index.jsx

@@ -12,4 +12,3 @@ 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 Zendesk } from './Zendesk';

src/common-components/messages.jsx

@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   // institution login strings
@@ -85,32 +85,42 @@ const messages = defineMessages({
   'login.third.party.auth.account.not.linked': {
     id: 'login.third.party.auth.account.not.linked',
     defaultMessage: 'You have successfully signed into {currentProvider}, but your {currentProvider} '
-                    + 'account does not have a linked {platformName} account. To link your accounts, '
-                    + 'sign in now using your {platformName} password.',
+      + 'account does not have a linked {platformName} account. To link your accounts, '
+      + 'sign in now using your {platformName} password.',
     description: 'Message that appears on login page if user has successfully authenticated with social '
-                  + 'auth but no associated platform account exists',
+      + 'auth but no associated platform account exists',
   },
   'register.third.party.auth.account.not.linked': {
     id: 'register.third.party.auth.account.not.linked',
     defaultMessage: 'You\'ve successfully signed into {currentProvider}! We just need a little more information '
-                    + 'before you start learning with {platformName}.',
+      + 'before you start learning with {platformName}.',
     description: 'Message that appears on register page if user has successfully authenticated with TPA '
-                  + 'but no associated platform account exists',
+      + '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',
+  'registration.other.options.heading': {
+    id: 'registration.other.options.heading',
+    defaultMessage: 'Or register with:',
+    description: 'A message that appears above third party auth providers i.e saml, google, facebook etc',
   },
-  selectTicketForm: {
-    id: 'zendesk.selectTicketForm',
-    description: 'Select ticket form',
-    defaultMessage: 'Please choose your request type:',
+  'institution.login.button': {
+    id: 'institution.login.button',
+    defaultMessage: 'Institution/campus credentials',
+    description: 'shows institutions list',
+  },
+  'login.other.options.heading': {
+    id: 'login.other.options.heading',
+    defaultMessage: 'Or sign in with:',
+    description: 'Text that appears above other sign in options like social auth buttons',
+  },
+  'enterprise.login.btn.text': {
+    id: 'enterprise.login.btn.text',
+    defaultMessage: 'Company or school credentials',
+    description: 'Company or school login link text.',
   },
 });
 

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

@@ -1,22 +1,20 @@
 /* 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 { getSiteConfig } from '@openedx/frontend-base';
+import { render } from '@testing-library/react';
 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';
 
+import { PAGE_NOT_FOUND, REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
 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>;
+RRD.BrowserRouter = ({ children }) => <div>{children}</div>;
 module.exports = RRD;
 
 const TestApp = () => (
@@ -27,6 +25,10 @@ const TestApp = () => (
           path={REGISTER_EMBEDDED_PAGE}
           element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
         />
+        <Route
+          path={PAGE_NOT_FOUND}
+          element={<span>Page not found</span>}
+        />
       </Routes>
     </div>
   </Router>
@@ -45,28 +47,30 @@ describe('EmbeddedRegistrationRoute', () => {
 
   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());
+      const { container } = await render(routerWrapper());
+      embeddedRegistrationPage = container;
     });
 
-    expect(embeddedRegistrationPage.find('span').exists()).toBeFalsy();
+    const renderedPage = embeddedRegistrationPage.querySelector('span');
+    expect(renderedPage.textContent).toBe('Page not found');
   });
 
   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),
+      href: getSiteConfig().baseUrl.concat(REGISTER_EMBEDDED_PAGE),
       search: '?host=http://localhost/host-websit',
     };
 
     let embeddedRegistrationPage = null;
-
     await act(async () => {
-      embeddedRegistrationPage = await mount(routerWrapper());
+      const { container } = await render(routerWrapper());
+      embeddedRegistrationPage = container;
     });
 
-    expect(embeddedRegistrationPage.find('span').exists()).toBeTruthy();
-    expect(embeddedRegistrationPage.find('span').text()).toBe('Embedded Register Page');
+    const renderedPage = embeddedRegistrationPage.querySelector('span');
+    expect(renderedPage).toBeTruthy();
+    expect(renderedPage.textContent).toBe('Embedded Register Page');
   });
 });

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { Provider } from 'react-redux';
 
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import { injectIntl, IntlProvider } from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -21,11 +20,17 @@ describe('FormGroup', () => {
   };
 
   it('should show help text on field focus', () => {
-    const formGroup = mount(<FormGroup {...props} />);
-    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').exists()).toBeFalsy();
+    const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
+    const emailInput = getByLabelText('Email');
 
-    formGroup.find('input#email').simulate('focus');
-    expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').text()).toEqual('Email field help text');
+    expect(queryByText('Email field help text')).toBeNull();
+
+    fireEvent.focus(emailInput);
+
+    const helpText = queryByText('Email field help text');
+
+    expect(helpText).toBeTruthy();
+    expect(helpText.textContent).toEqual('Email field help text');
   });
 });
 
@@ -60,25 +65,29 @@ describe('PasswordField', () => {
   });
 
   it('should show/hide password on icon click', () => {
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
 
-    passwordField.find('button[aria-label="Show password"]').simulate('click');
-    expect(passwordField.find('input').prop('type')).toEqual('text');
+    const showPasswordButton = getByLabelText('Show password');
+    fireEvent.click(showPasswordButton);
+    expect(passwordInput.type).toBe('text');
 
-    passwordField.find('button[aria-label="Hide password"]').simulate('click');
-    expect(passwordField.find('input').prop('type')).toEqual('password');
+    const hidePasswordButton = getByLabelText('Hide password');
+    fireEvent.click(hidePasswordButton);
+    expect(passwordInput.type).toBe('password');
   });
 
   it('should show password requirement tooltip on focus', async () => {
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
+    const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
 
-    expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
+    expect(passwordRequirementTooltip).toBeTruthy();
   });
 
   it('should show all password requirement checks as failed', async () => {
@@ -86,48 +95,66 @@ describe('PasswordField', () => {
       ...props,
       value: '',
     };
-
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
 
-    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
-    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
-    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
   });
 
   it('should update password requirement checks', async () => {
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
-      passwordField.find('input').simulate('focus');
+      fireEvent.focus(passwordInput);
       jest.runAllTimers();
     });
-    passwordField.update();
 
-    expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
-    expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
-    expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
+    const letterCheckIcon = document.querySelector('#letter-check span');
+    const numberCheckIcon = document.querySelector('#number-check span');
+    const charactersCheckIcon = document.querySelector('#characters-check span');
+
+    expect(letterCheckIcon).toBeTruthy();
+    expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(numberCheckIcon).toBeTruthy();
+    expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
+
+    expect(charactersCheckIcon).toBeTruthy();
+    expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
   });
 
   it('should not run validations when blur is fired on password icon click', () => {
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
 
-    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordInput, {
       target: {
         name: 'password',
         value: 'invalid',
       },
-      relatedTarget: {
-        name: 'passwordIcon',
-      },
+      relatedTarget: passwordIcon,
     });
 
-    expect(passwordField.find('div[feedback-for="password"]').exists()).toBeFalsy();
+    expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
   });
 
   it('should call props handle blur if available', () => {
@@ -135,9 +162,10 @@ describe('PasswordField', () => {
       ...props,
       handleBlur: jest.fn(),
     };
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
 
-    passwordField.find('input#password').simulate('blur', {
+    fireEvent.blur(passwordInput, {
       target: {
         name: 'password',
         value: '',
@@ -152,9 +180,10 @@ describe('PasswordField', () => {
       ...props,
       handleErrorChange: jest.fn(),
     };
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordInput = container.querySelector('input[name="password"]');
 
-    passwordField.find('input#password').simulate('blur', {
+    fireEvent.blur(passwordInput, {
       target: {
         name: 'password',
         value: '',
@@ -174,9 +203,11 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
-    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
       target: {
         name: 'passwordIcon',
         value: '',
@@ -192,9 +223,11 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
-    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.focus(passwordIcon, {
       target: {
         name: 'password',
         value: 'invalid',
@@ -214,9 +247,9 @@ describe('PasswordField', () => {
       ...props,
       handleErrorChange: jest.fn(),
     };
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
-
-    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const passwordField = getByLabelText('Password');
+    fireEvent.blur(passwordField, {
       target: {
         name: 'password',
         value: 'password123',
@@ -234,9 +267,11 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
       handleBlur: jest.fn(),
     };
-    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
-    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+    const passwordIcon = getByLabelText('Show password');
+
+    fireEvent.blur(passwordIcon, {
       target: {
         name: 'passwordIcon',
         value: undefined,

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

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import renderer from 'react-test-renderer';
 
 import registerIcons from '../RegisterFaIcons';

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

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import renderer from 'react-test-renderer';
 
 import { REGISTER_PAGE } from '../../data/constants';

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

@@ -1,19 +1,18 @@
 /* eslint-disable import/no-import-module-exports */
 /* eslint-disable react/function-component-definition */
-import React from 'react';
 
-import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { mount } from 'enzyme';
+import { fetchAuthenticatedUser, getAuthenticatedUser } from '@openedx/frontend-base';
+import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-
-import { UnAuthOnlyRoute } from '..';
-import { REGISTER_PAGE } from '../../data/constants';
-
 import {
   MemoryRouter, Route, BrowserRouter as Router, Routes,
 } from 'react-router-dom';
 
-jest.mock('@edx/frontend-platform/auth', () => ({
+import { UnAuthOnlyRoute } from '..';
+import { REGISTER_PAGE } from '../../data/constants';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
   getAuthenticatedUser: jest.fn(),
   fetchAuthenticatedUser: jest.fn(),
 }));
@@ -55,7 +54,7 @@ describe('UnAuthOnlyRoute', () => {
     fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(user));
 
     await act(async () => {
-      await mount(routerWrapper());
+      await render(routerWrapper());
     });
 
     expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: true });
@@ -66,7 +65,7 @@ describe('UnAuthOnlyRoute', () => {
     fetchAuthenticatedUser.mockReturnValueOnce(Promise.resolve(null));
 
     await act(async () => {
-      await mount(routerWrapper());
+      await render(routerWrapper());
     });
 
     expect(fetchAuthenticatedUser).toBeCalledWith({ forceRefresh: false });

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

@@ -1,17 +0,0 @@
-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

@@ -66,14 +66,14 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
       data-prefix="fab"
       focusable="false"
       role="img"
-      style={Object {}}
+      style={{}}
       viewBox="0 0 488 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
         fill="currentColor"
-        style={Object {}}
+        style={{}}
       />
     </svg>
   </div>
@@ -93,7 +93,7 @@ exports[`SocialAuthProviders should match social auth provider with iconClass sn
 `;
 
 exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-Array [
+[
   <button
     className="btn-social btn-oa2-apple-id mr-3"
     data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"

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

@@ -13,7 +13,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
       className="alert-message-content"
     >
       <p>
-        You have successfully signed into Google, but your Google account does not have a linked Your Platform Name Here account. To link your accounts, sign in now using your Your Platform Name Here password.
+        You have successfully signed into Google, but your Google account does not have a linked Test Site account. To link your accounts, sign in now using your Test Site password.
       </p>
     </div>
   </div>
@@ -21,7 +21,7 @@ exports[`ThirdPartyAuthAlert should match login page third party auth alert mess
 `;
 
 exports[`ThirdPartyAuthAlert should match register page third party auth alert message snapshot 1`] = `
-Array [
+[
   <div
     className="fade alert-content alert-success mt-n2 mb-5 alert show"
     id="tpa-alert"
@@ -39,7 +39,7 @@ Array [
           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.
+          You've successfully signed into Google! We just need a little more information before you start learning with Test Site.
         </p>
       </div>
     </div>

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

@@ -1,65 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-const configuration = {
-  // Cookies related configs
-  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
-  USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
-  // 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_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
-  MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
-  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 || '[]',
-  // Miscellaneous
-  INFO_EMAIL: process.env.INFO_EMAIL || '',
-  ZENDESK_KEY: process.env.ZENDESK_KEY,
-  ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
-  ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
-  ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
-};
-
-export default configuration;

src/constants.ts

@@ -0,0 +1 @@
+export const appId = 'org.openedx.frontend.app.authn';

src/data/algolia.js

@@ -1,20 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import algoliasearch from 'algoliasearch';
-
-// initialize Algolia workers
-const initializeSearchClient = () => algoliasearch(
-  getConfig().ALGOLIA_APP_ID,
-  getConfig().ALGOLIA_SEARCH_API_KEY,
-);
-
-const getLocationRestrictionFilter = (userCountry) => {
-  if (userCountry) {
-    return `NOT blocked_in:"${userCountry}" AND (allowed_in:"null" OR allowed_in:"${userCountry}")`;
-  }
-  return '';
-};
-
-export {
-  initializeSearchClient,
-  getLocationRestrictionFilter,
-};

src/data/configureStore.js

@@ -1,4 +1,4 @@
-import { getConfig } from '@edx/frontend-platform';
+import { getSiteConfig } from '@openedx/frontend-base';
 import { composeWithDevTools } from '@redux-devtools/extension';
 import { applyMiddleware, compose, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
@@ -11,7 +11,7 @@ import rootSaga from './sagas';
 const sagaMiddleware = createSagaMiddleware();
 
 function composeMiddleware() {
-  if (getConfig().ENVIRONMENT === 'development') {
+  if (getSiteConfig().environment === 'development') {
     const loggerMiddleware = createLogger({
       collapsed: true,
     });

src/data/constants.js

@@ -5,7 +5,6 @@ export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
 export const RESET_PAGE = '/reset';
 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';
@@ -29,9 +28,9 @@ export const EMBEDDED = 'embedded';
 export const LETTER_REGEX = /[a-zA-Z]/;
 export const NUMBER_REGEX = /\d/;
 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}\\]$';
+  + '|^"([\\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}\\]$';
 
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.

src/data/countries.ts

@@ -0,0 +1,59 @@
+import { getPrimaryLanguageSubtag } from '@openedx/frontend-base';
+import COUNTRIES, { langs as countryLangs } from 'i18n-iso-countries';
+import arLocale from 'i18n-iso-countries/langs/ar.json';
+import caLocale from 'i18n-iso-countries/langs/ca.json';
+import enLocale from 'i18n-iso-countries/langs/en.json';
+import esLocale from 'i18n-iso-countries/langs/es.json';
+import frLocale from 'i18n-iso-countries/langs/fr.json';
+import heLocale from 'i18n-iso-countries/langs/he.json';
+import idLocale from 'i18n-iso-countries/langs/id.json';
+import koLocale from 'i18n-iso-countries/langs/ko.json';
+import plLocale from 'i18n-iso-countries/langs/pl.json';
+import ptLocale from 'i18n-iso-countries/langs/pt.json';
+import ruLocale from 'i18n-iso-countries/langs/ru.json';
+import ukLocale from 'i18n-iso-countries/langs/uk.json';
+import zhLocale from 'i18n-iso-countries/langs/zh.json';
+
+COUNTRIES.registerLocale(arLocale);
+COUNTRIES.registerLocale(enLocale);
+COUNTRIES.registerLocale(esLocale);
+COUNTRIES.registerLocale(frLocale);
+COUNTRIES.registerLocale(zhLocale);
+COUNTRIES.registerLocale(caLocale);
+COUNTRIES.registerLocale(heLocale);
+COUNTRIES.registerLocale(idLocale);
+COUNTRIES.registerLocale(koLocale);
+COUNTRIES.registerLocale(plLocale);
+COUNTRIES.registerLocale(ptLocale);
+COUNTRIES.registerLocale(ruLocale);
+COUNTRIES.registerLocale(ukLocale);
+
+/**
+ * Provides a lookup table of country IDs to country names for the current locale.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryMessages(locale) {
+  const primaryLanguageSubtag = getPrimaryLanguageSubtag(locale);
+  const languageCode = countryLangs().includes(primaryLanguageSubtag) ? primaryLanguageSubtag : 'en';
+
+  return COUNTRIES.getNames(languageCode);
+}
+
+/**
+ * Provides a list of countries represented as objects of the following shape:
+ *
+ * {
+ *   key, // The ID of the country
+ *   name // The localized name of the country
+ * }
+ *
+ * TODO: ARCH-878: The list should be sorted alphabetically in the current locale.
+ * This is useful for populating dropdowns.
+ *
+ * @memberof module:I18n
+ */
+export function getCountryList(locale) {
+  const countryMessages = getCountryMessages(locale);
+  return Object.entries(countryMessages).map(([code, name]) => ({ code, name }));
+}

src/data/optimizely.js

@@ -1,17 +0,0 @@
-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/tests/algolia.test.js

@@ -1,16 +0,0 @@
-import { getLocationRestrictionFilter } from '../algolia';
-
-describe('algoliaUtilsTests', () => {
-  it('test getLocationRestrictionFilter returns filter if country is passed', () => {
-    const countryCode = 'PK';
-    const filter = getLocationRestrictionFilter(countryCode);
-    const expectedFilter = `NOT blocked_in:"${countryCode}" AND (allowed_in:"null" OR allowed_in:"${countryCode}")`;
-    expect(filter).toEqual(expectedFilter);
-  });
-  it('test getLocationRestrictionFilter returns empty string if country is not passed', () => {
-    const countryCode = '';
-    const filter = getLocationRestrictionFilter(countryCode);
-    const expectedFilter = '';
-    expect(filter).toEqual(expectedFilter);
-  });
-});

src/data/tests/cookies.test.js

@@ -0,0 +1,42 @@
+import Cookies from 'universal-cookie';
+
+import { setCookie } from '../utils';
+
+// Mock Cookies class
+jest.mock('universal-cookie');
+
+describe('setCookie function', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should set a cookie with default options', () => {
+    setCookie('testCookie', 'testValue', 'example.com');
+
+    expect(Cookies).toHaveBeenCalled();
+    expect(Cookies).toHaveBeenCalledWith();
+    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
+      domain: 'example.com',
+      path: '/',
+    });
+  });
+
+  it('should set a cookie with specified expiry', () => {
+    const expiry = new Date('2023-12-31');
+    setCookie('testCookie', 'testValue', 'example.com', expiry);
+
+    expect(Cookies).toHaveBeenCalled();
+    expect(Cookies).toHaveBeenCalledWith();
+    expect(Cookies.prototype.set).toHaveBeenCalledWith('testCookie', 'testValue', {
+      domain: 'example.com',
+      path: '/',
+      expires: expiry,
+    });
+  });
+
+  it('should not set a cookie if cookieName is undefined', () => {
+    setCookie(undefined, 'testValue', 'example.com');
+
+    expect(Cookies).not.toHaveBeenCalled();
+  });
+});

src/data/utils/cookies.js

@@ -1,11 +1,12 @@
-import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
-export default function setCookie(cookieName, cookieValue, cookieExpiry) {
-  const cookies = new Cookies();
-  const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
-  if (cookieExpiry) {
-    options.expires = cookieExpiry;
+export default function setCookie(cookieName, cookieValue, cookieDomain, cookieExpiry) {
+  if (cookieName) { // To avoid setting getting exception when setting cookie with undefined names.
+    const cookies = new Cookies();
+    const options = { domain: cookieDomain, path: '/' };
+    if (cookieExpiry) {
+      options.expires = cookieExpiry;
+    }
+    cookies.set(cookieName, cookieValue, options);
   }
-  cookies.set(cookieName, cookieValue, options);
 }

src/data/utils/dataUtils.js

@@ -40,10 +40,8 @@ export const updatePathWithQueryParams = (path) => {
     return path;
   }
 
-  if (queryParams.indexOf('track=pwreset') > -1) {
-    queryParams = queryParams.replace(
-      '?track=pwreset&', '?',
-    ).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
+  if (queryParams.includes('track=pwreset')) {
+    queryParams = queryParams.replace('?track=pwreset&', '?',).replace('?track=pwreset', '').replace('&track=pwreset', '').replace('?&', '?');
   }
 
   return `${path}${queryParams}`;
@@ -53,7 +51,7 @@ 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) {
+    if (AUTH_PARAMS.includes(key)) {
       params[key] = value;
     }
   });

src/data/utils/useMobileResponsive.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { breakpoints } from '@edx/paragon';
+import { breakpoints } from '@openedx/paragon';
 
 /**
  * A react hook used to determine if the current window is mobile or not.

src/field-renderer/FieldRenderer.jsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { Form, Icon } from '@edx/paragon';
-import { ExpandMore } from '@edx/paragon/icons';
+import { Form, Icon } from '@openedx/paragon';
+import { ExpandMore } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 const FormFieldRenderer = (props) => {

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

@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { mount } from 'enzyme';
+import { getSiteConfig } from '@openedx/frontend-base';
+import { fireEvent, render } from '@testing-library/react';
 
 import FieldRenderer from '../FieldRenderer';
 
@@ -28,13 +26,14 @@ describe('FieldRendererTests', () => {
       options: [['1997', '1997'], ['1998', '1998']],
     };
 
-    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const field = fieldRenderer.find('select#yob-field');
-    field.simulate('change', { target: { value: 1997 } });
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('select#yob-field');
+    const label = container.querySelector('label');
+    fireEvent.change(input, { target: { value: 1997 } });
 
-    expect(field.type()).toEqual('select');
-    expect(fieldRenderer.find('label').text()).toEqual('Year of Birth');
-    expect(value).toEqual(1997);
+    expect(input.type).toEqual('select-one');
+    expect(label.textContent).toContain(fieldData.label);
+    expect(value).toEqual('1997');
   });
 
   it('should return null if no options are provided for select field', () => {
@@ -44,8 +43,8 @@ describe('FieldRendererTests', () => {
       name: 'yob-field',
     };
 
-    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(fieldRenderer.html()).toBeNull();
+    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => { }} />);
+    expect(container.innerHTML).toEqual('');
   });
 
   it('should render textarea field', () => {
@@ -55,12 +54,13 @@ describe('FieldRendererTests', () => {
       name: 'goals-field',
     };
 
-    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const field = fieldRenderer.find('#goals-field').last();
-    field.simulate('change', { target: { value: 'These are my goals.' } });
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('#goals-field');
+    const label = container.querySelector('label');
+    fireEvent.change(input, { target: { value: 'These are my goals.' } });
 
-    expect(field.type()).toEqual('textarea');
-    expect(fieldRenderer.find('label').text()).toEqual('Why do you want to join this platform?');
+    expect(input.type).toEqual(fieldData.type);
+    expect(label.textContent).toContain('Why do you want to join this platform?');
     expect(value).toEqual('These are my goals.');
   });
 
@@ -71,28 +71,30 @@ describe('FieldRendererTests', () => {
       name: 'company-field',
     };
 
-    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const field = fieldRenderer.find('#company-field').last();
-    field.simulate('change', { target: { value: 'ABC' } });
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#company-field');
+    const label = container.querySelector('label');
+    fireEvent.change(input, { target: { value: 'ABC' } });
 
-    expect(field.type()).toEqual('input');
-    expect(fieldRenderer.find('label').text()).toEqual('Company');
+    expect(input.type).toEqual(fieldData.type);
+    expect(label.textContent).toContain(fieldData.label);
     expect(value).toEqual('ABC');
   });
 
   it('should render checkbox field', () => {
     const fieldData = {
       type: 'checkbox',
-      label: `I agree that ${getConfig().SITE_NAME} may send me marketing messages.`,
+      label: `I agree that ${getSiteConfig().siteName} may send me marketing messages.`,
       name: 'marketing-emails-opt-in-field',
     };
 
-    const fieldRenderer = mount(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
-    const field = fieldRenderer.find('input#marketing-emails-opt-in-field');
-    field.simulate('change', { target: { checked: true, type: 'checkbox' } });
+    const { container } = render(<FieldRenderer value={value} fieldData={fieldData} onChangeHandler={changeHandler} />);
+    const input = container.querySelector('input#marketing-emails-opt-in-field');
+    const label = container.querySelector('label');
+    fireEvent.click(input);
 
-    expect(field.prop('type')).toEqual('checkbox');
-    expect(fieldRenderer.find('label').text()).toEqual(fieldData.label);
+    expect(input.type).toEqual(fieldData.type);
+    expect(label.textContent).toContain(fieldData.label);
     expect(value).toEqual(true);
   });
 
@@ -101,8 +103,8 @@ describe('FieldRendererTests', () => {
       type: 'unknown',
     };
 
-    const fieldRenderer = mount(<FieldRenderer fieldData={fieldData} onChangeHandler={() => {}} />);
-    expect(fieldRenderer.html()).toBeNull();
+    const { container } = render(<FieldRenderer fieldData={fieldData} onChangeHandler={() => { }} />);
+    expect(container.innerHTML).toContain('');
   });
 
   it('should run onBlur and onFocus functions for a field if given', () => {
@@ -117,7 +119,7 @@ describe('FieldRendererTests', () => {
       functionValue = `${e.target.name} focussed`;
     };
 
-    const fieldRenderer = mount(
+    const { container } = render(
       <FieldRenderer
         handleFocus={onFocus}
         handleBlur={onBlur}
@@ -126,19 +128,19 @@ describe('FieldRendererTests', () => {
         onChangeHandler={changeHandler}
       />,
     );
-    const field = fieldRenderer.find('#test-field').last();
+    const input = container.querySelector('#test-field');
 
-    field.simulate('focus');
+    fireEvent.focus(input);
     expect(functionValue).toEqual('test-field focussed');
 
-    field.simulate('blur');
+    fireEvent.blur(input);
     expect(functionValue).toEqual('test-field blurred');
   });
 
   it('should render error message for required text fields', () => {
     const fieldData = { type: 'text', label: 'First Name', name: 'first-name-field' };
 
-    const fieldRenderer = mount(
+    const { container } = render(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -147,7 +149,7 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Enter your first name');
+    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Enter your first name');
   });
 
   it('should render error message for required select fields', () => {
@@ -155,7 +157,7 @@ describe('FieldRendererTests', () => {
       type: 'select', label: 'Preference', name: 'preference-field', options: [['a', 'Opt 1'], ['b', 'Opt 2']],
     };
 
-    const fieldRenderer = mount(
+    const { container } = render(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -164,13 +166,13 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Select your preference');
+    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Select your preference');
   });
 
   it('should render error message for required textarea fields', () => {
     const fieldData = { type: 'textarea', label: 'Goals', name: 'goals-field' };
 
-    const fieldRenderer = mount(
+    const { container } = render(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -179,13 +181,13 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('Tell us your goals');
+    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('Tell us your goals');
   });
 
   it('should render error message for required checkbox fields', () => {
     const fieldData = { type: 'checkbox', label: 'Honor Code', name: 'honor-code-field' };
 
-    const fieldRenderer = mount(
+    const { container } = render(
       <FieldRenderer
         isRequired
         fieldData={fieldData}
@@ -194,6 +196,6 @@ describe('FieldRendererTests', () => {
       />,
     );
 
-    expect(fieldRenderer.find('.form-text-size').last().text()).toEqual('You must agree to our Honor Code');
+    expect(container.querySelector(`#${fieldData.name}-error`).textContent).toEqual('You must agree to our Honor Code');
   });
 });

src/forgot-password/ForgotPasswordAlert.jsx

@@ -1,16 +1,13 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { CheckCircle, Error } from '@edx/paragon/icons';
+import { FormattedMessage, useAppConfig, useIntl } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
+import { CheckCircle, Error } from '@openedx/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 { formatMessage } = useIntl();
@@ -36,14 +33,14 @@ const ForgotPasswordAlert = (props) => {
           values={{
             email: <span className="data-hj-suppress">{email}</span>,
             supportLink: (
-              <Alert.Link href={getConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
+              <Alert.Link href={useAppConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
                 {formatMessage(messages['confirmation.support.link'])}
               </Alert.Link>
             ),
           }}
         />
       );
-     break;
+      break;
     case INTERNAL_SERVER_ERROR:
       message = formatMessage(messages['internal.server.error']);
       break;

src/forgot-password/ForgotPasswordPage.jsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
-import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  useAppConfig,
+  getSiteConfig, sendPageEvent, sendTrackEvent, useIntl
+} from '@openedx/frontend-base';
 import {
   Form,
   Hyperlink,
@@ -11,23 +12,23 @@ import {
   StatefulButton,
   Tab,
   Tabs,
-} from '@edx/paragon';
-import { ChevronLeft } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { ChevronLeft } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';
 
-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, 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';
 
 const ForgotPasswordPage = (props) => {
-  const platformName = getConfig().SITE_NAME;
+  const platformName = getSiteConfig().siteName;
   const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
   const {
     status, submitState, emailValidationError,
@@ -97,8 +98,11 @@ const ForgotPasswordPage = (props) => {
   return (
     <BaseContainer>
       <Helmet>
-        <title>{formatMessage(messages['forgot.password.page.title'],
-          { siteName: getConfig().SITE_NAME })}
+        <title>
+          {formatMessage(
+            messages['forgot.password.page.title'],
+            { siteName: getSiteConfig().siteName }
+          )}
         </title>
       </Helmet>
       <div>
@@ -139,12 +143,12 @@ const ForgotPasswordPage = (props) => {
               onClick={handleSubmit}
               onMouseDown={(e) => e.preventDefault()}
             />
-            {(getConfig().LOGIN_ISSUE_SUPPORT_LINK) && (
+            {(useAppConfig().LOGIN_ISSUE_SUPPORT_LINK) && (
               <Hyperlink
                 id="forgot-password"
                 name="forgot-password"
                 className="ml-4 font-weight-500 text-body"
-                destination={getConfig().LOGIN_ISSUE_SUPPORT_LINK}
+                destination={useAppConfig().LOGIN_ISSUE_SUPPORT_LINK}
                 target="_blank"
                 showLaunchIcon={false}
               >
@@ -154,7 +158,7 @@ const ForgotPasswordPage = (props) => {
             <p className="mt-5.5 small text-gray-700">
               {formatMessage(messages['additional.help.text'], { platformName })}
               <span>
-                <Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink>
+                <Hyperlink isInline destination={`mailto:${useAppConfig().INFO_EMAIL}`}>{useAppConfig().INFO_EMAIL}</Hyperlink>
               </span>
             </p>
           </Form>