fix: removed codecov package

2023-03-13 10:50:54 +05:00
81 changed files with 19348 additions and 15109 deletions
--- a/.env
+++ b/.env
@@ -19,7 +19,3 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
-APP_ID=''
-MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -20,7 +20,3 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
-APP_ID=''
-MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -18,6 +18,3 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
-APP_ID=''
-MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
+const { createConfig } = require('@edx/frontend-build');

-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('eslint', {
-  rules: {
-    'react/function-component-definition': 'off',
-  },
-});
+module.exports = createConfig('eslint');
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,18 +9,18 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        node: [16]
    steps:
    - name: Checkout
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
@@ -34,7 +34,4 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.github/workflows/update-browserslist-db.yml
+++ b/.github/workflows/update-browserslist-db.yml
@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
-env.config.*

 dist/
 src/i18n/transifex_input.json
@@ -18,4 +17,3 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-src/i18n/messages/
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1,2 @@
-24
+16
+
--- a/34
+++ b/34
@@ -1,17 +1,21 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-communications
+transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 precommit:
 	npm run lint
 	npm audit

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -29,18 +33,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-	   && atlas pull $(ATLAS_OPTIONS) \
-	            translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
-	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-	            translations/paragon/src/i18n/messages:paragon \
-	            translations/frontend-platform/src/i18n/messages:frontend-platform \
-	            translations/frontend-app-communications/src/i18n/messages:frontend-app-communications
+# 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/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)

-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-platform frontend-app-communications
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,72 +1,55 @@
+|Codecov| |license|
+
+.. |codecov| image:: https://codecov.io/gh/edx/frontend-app-learning/branch/master/graph/badge.svg?token=3z7XvuzTq3
+   :target: https://codecov.io/gh/edx/frontend-app-communications
+.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
+   :target: https://github.com/edx/frontend-app-account/blob/master/LICENSE
+
 frontend-app-communications
-###########################
+==============================

-|license-badge| |status-badge| |ci-badge| |codecov-badge|
+Please tag **edx-aperture** on any PRs or issues.  Thanks!
+
+Introduction
+------------
+
+A tool used by course teams to communicate with thier learners. The interface for anything related to instructor to learner communications. Instructor bulk email, for example.


-Purpose
-********
+Getting started
+------------

-A tool used by course teams to communicate with their learners. The interface for anything related to instructor-to-learner communications. Instructor bulk email, for example.
+For now, this repo is not intergrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.

-Getting Started
-***************
+1. Clone the repo into your usual workspace

-Prerequisites
-=============
+   .. code-block::

-`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.
+      mkdir -p ~/workspace/
+      cd ~/workspace/
+      git clone https://github.com/edx/frontend-app-communications.git

-.. _Tutor: https://github.com/overhangio/tutor
+2. Install frontend dependencies

-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
+   .. code-block::

+      npm i

-Cloning and Startup
-===================
+3. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.

-1. Clone your new repo:
-
-.. code-block:: bash
-
-   git clone https://github.com/edx/frontend-app-communications.git
-
-2. Use the version of Node specified in the ``.nvmrc`` file.
-
-   The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
-   Using other major versions of node *may* work, but this is unsupported.  For
-   convenience, this repository includes a ``.nvmrc`` file to help in setting the
-   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
-
-3. Install npm dependencies:
-
-.. code-block:: bash
-
-   cd frontend-app-communications && npm install
-
-4. Update the application port to use for local development:
-
-   The default port is 1984. If this does not work for you, update the line
-   ``PORT=1984`` to your port in all ``.env.*`` files
-
-5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
-
-   .. code-block:: bash
+   .. code-block::

      npm start

-
 Environment Variables/Setup Notes
 ---------------------------------

-If you wish to add new environment variables for local testing, they should be listed in 2 places:
+If you wish to add new environment varibles for local testing, they should be listed in 2 places:

 1. In ``.env.development``
 2. Added to the ``mergeConfig`` found in ``src/index.jsx``

-.. code-block:: jsx
+.. code-block::

   initialize({
      config: () => {
@@ -75,108 +58,10 @@ If you wish to add new environment variables for local testing, they should be l
       }, 'CommuncationsAppConfig');

 Running Tests
-------------
+---------------------------

 Tests use `jest` and `react-test-library`. To run all the tests for this repo:

-.. code-block::
+   .. code-block::

-   npm test
-
-Plugins
-=======
-This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
-
-**Production Build**
-
-The production build is created with ``npm run build``.
-
-Internationalization
-====================
-
-Please refer to the `frontend-platform i18n howto`_ for documentation on
-internationalization.
-
-.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
-
-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-communications/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
-
-License
-*******
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-************
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-The Open edX Code of Conduct
-****************************
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _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`_. Backstage pulls this data from the ``catalog-info.yaml``
-file in this repo.
-
-.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-communications
-
-Reporting Security Issues
-*************************
-
-Please do not report security issues in public, and email security@openedx.org instead.
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-communications.svg
-    :target: https://github.com/openedx/frontend-app-communications/blob/master/LICENSE
-    :alt: License
-
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml
-    :alt: Continuous Integration
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-communications/coverage.svg?branch=master
-    :target: https://codecov.io/github/openedx/frontend-app-communications?branch=master
-    :alt: Codecov
+      npm test
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,19 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: "frontend-app-communications"
-  description: "A tool used by course teams to communicate with their learners."
-  links:
-    - url: "https://github.com/openedx/frontend-app-communications/blob/master/README.rst"
-      title: "README"
-      icon: "Article"
-  annotations:
-    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
-spec:
-  owner: group:committers-frontend
-  type: "service"
-  lifecycle: "production"
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
--- a/module.config.js.example
+++ b/module.config.js.example
@@ -23,9 +23,9 @@ module.exports = {
    **********************************************************************************************/

    // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
-    // { moduleName: '@openedx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
-    // { moduleName: '@openedx/paragon/icons', dir: '../paragon', dist: 'icons' },
-    // { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
+    // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
+    // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
+    // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
    // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
  ],
 };
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,9 @@
+# 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
+
+oeps: {}
+openedx-release:
+  # The openedx-release key is described in OEP-10:
+  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
+  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
+  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,14 +11,18 @@
  ],
  "scripts": {
    "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx src/",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx src/",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/communications/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
  "author": "edX",
  "license": "AGPL-3.0",
  "homepage": "https://github.com/edx/frontend-app-communications#readme",
@@ -29,19 +33,17 @@
    "url": "https://github.com/edx/frontend-app-communications/issues"
  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.6.1",
-    "@edx/frontend-platform": "^8.3.7",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "11.6.0",
+    "@edx/frontend-component-header": "3.5.0",
+    "@edx/frontend-platform": "2.6.2",
+    "@edx/paragon": "^20.20.0",
    "@edx/tinymce-language-selector": "1.1.0",
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
-    "@openedx/paragon": "^23.3.0",
    "@tinymce/tinymce-react": "3.14.0",
    "axios": "0.27.2",
    "classnames": "2.3.2",
@@ -49,26 +51,26 @@
    "jquery": "3.6.1",
    "popper.js": "1.16.1",
    "prop-types": "15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
    "react-redux": "7.2.9",
-    "react-router": "6.15.0",
-    "react-router-dom": "6.15.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4",
    "redux": "4.2.0",
    "regenerator-runtime": "0.13.11",
    "tinymce": "5.10.7"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
-    "@edx/typescript-config": "^1.1.0",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-build": "11.0.2",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "12.1.5",
    "axios-mock-adapter": "1.21.2",
    "glob": "7.2.3",
-    "jest": "29.7.0",
+    "husky": "7.0.4",
+    "jest": "27.5.1",
    "prettier": "2.8.1",
+    "reactifex": "1.1.1",
    "rosie": "2.1.0"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -24,7 +24,7 @@
      "automerge": true
    },
    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchPackagePatterns": ["@edx"],
      "matchUpdateTypes": ["minor", "patch"],
      "automerge": true
    }
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <AppProvider>
-    <HelmetWrapper
-      defer={true}
-      encodeSpecialCharacters={true}
-    >
-      <link
-        href="favicon-url"
-        rel="shortcut icon"
-        type="image/x-icon"
-      />
-    </HelmetWrapper>
-    <Routes>
-      <Route
-        element={
-          <AuthenticatedPageRoute>
-            <Page Container>
-              <Bulk Email Tool />
-            </Page Container>
-          </AuthenticatedPageRoute>
-        }
-        path="/courses/:courseId/bulk_email"
-      />
-    </Routes>
-  </AppProvider>
-</UNDEFINED>
-`;
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';

 import { ErrorPage } from '@edx/frontend-platform/react';
-import { Container } from '@openedx/paragon';
+import { Container } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import BulkEmailTaskManager from './bulk-email-task-manager/BulkEmailTaskManager';
 import NavigationTabs from '../navigation-tabs/NavigationTabs';
@@ -22,9 +22,9 @@ export default function BulkEmailTool() {
          <NavigationTabs courseId={courseId} tabData={courseMetadata.tabs} />
          <BulkEmailProvider>
            <Container size="md">
-              <BackToInstructor courseId={courseId} />
+              <BackToInstructor />
              <div className="row pb-4.5">
-                <h1 className="text-primary-500">
+                <h1 className="text-primary-500" id="main-content">
                  <FormattedMessage
                    id="bulk.email.send.email.header"
                    defaultMessage="Send an email"
@@ -33,11 +33,7 @@ export default function BulkEmailTool() {
                </h1>
              </div>
              <div className="row">
-                <BulkEmailForm
-                  courseId={courseId}
-                  cohorts={courseMetadata.cohorts}
-                  courseModes={courseMetadata.courseModes}
-                />
+                <BulkEmailForm courseId={courseId} cohorts={courseMetadata.cohorts} />
              </div>
              <div className="row py-5">
                <BulkEmailTaskManager courseId={courseId} />
--- a/src/components/bulk-email-tool/bulk-email-context/BulkEmailProvider.jsx
+++ b/src/components/bulk-email-tool/bulk-email-context/BulkEmailProvider.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import useAsyncReducer, { combineReducers } from '../../../utils/useAsyncReducer';
--- a/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
@@ -1,14 +1,13 @@
-/* eslint-disable react/no-unstable-nested-components */
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
  Button,
  Form, Icon, StatefulButton, Toast, useToggle,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import {
  SpinnerSimple, Cancel, Send, Event, Check,
-} from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+} from '@edx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
 import TextEditor from '../text-editor/TextEditor';
@@ -47,12 +46,7 @@ const FORM_ACTIONS = {
 };

 function BulkEmailForm(props) {
-  const {
-    courseId,
-    cohorts,
-    courseModes,
-  } = props;
-  const intl = useIntl();
+  const { courseId, cohorts, intl } = props;
  const [{ editor }, dispatch] = useContext(BulkEmailContext);
  const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
  const [emailFormValidation, setEmailFormValidation] = useState({
@@ -277,14 +271,10 @@ function BulkEmailForm(props) {
          handleCheckboxes={onRecipientChange}
          additionalCohorts={cohorts}
          isValid={emailFormValidation.recipients}
-          courseModes={courseModes}
        />
        <Form.Group controlId="emailSubject">
          <Form.Label className="h3 text-primary-500">{intl.formatMessage(messages.bulkEmailSubjectLabel)}</Form.Label>
-          <Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} maxLength={128} />
-          <Form.Control.Feedback className="px-3" type="default">
-            {intl.formatMessage(messages.bulkEmailFormSubjectTip)}
-          </Form.Control.Feedback>
+          <Form.Control name="emailSubject" className="w-lg-50" onChange={onFormChange} value={editor.emailSubject} />
          {!emailFormValidation.subject && (
            <Form.Control.Feedback className="px-3" hasIcon type="invalid">
              {intl.formatMessage(messages.bulkEmailFormSubjectError)}
@@ -392,13 +382,7 @@ BulkEmailForm.defaultProps = {
 BulkEmailForm.propTypes = {
  courseId: PropTypes.string.isRequired,
  cohorts: PropTypes.arrayOf(PropTypes.string),
-
-  courseModes: PropTypes.arrayOf(
-    PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
+  intl: intlShape.isRequired,
 };

-export default BulkEmailForm;
+export default injectIntl(BulkEmailForm);
--- a/src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx
@@ -2,15 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 import useMobileResponsive from '../../../utils/useMobileResponsive';

 function ScheduleEmailForm(props) {
  const isMobile = useMobileResponsive();
  const { isValid, onDateTimeChange, dateTime } = props;
  const { date, time } = dateTime;
-  const descriptionDate = new Date();
-  descriptionDate.setDate(new Date().getDate() + 1);
  return (
    <Form.Group>
      <div className={classNames('d-flex', isMobile ? 'flex-column' : 'flex-row', 'my-3')}>
@@ -32,10 +30,7 @@ function ScheduleEmailForm(props) {
          <small className="text-gray-500 x-small">
            <FormattedMessage
              id="bulk.email.form.schedule.date.description"
-              defaultMessage="Enter a start date, e.g. {date}"
-              values={{
-                date: descriptionDate.toLocaleDateString(),
-              }}
+              defaultMessage="Enter a start date, e.g. 11/27/2023"
            />
          </small>
        </div>
@@ -57,10 +52,7 @@ function ScheduleEmailForm(props) {
          <small className="text-gray-500 x-small">
            <FormattedMessage
              id="bulk.email.form.schedule.time.description"
-              defaultMessage="Enter a start time, e.g. {time}"
-              values={{
-                time: descriptionDate.toLocaleTimeString([], { timeStyle: 'short' }),
-              }}
+              defaultMessage="Enter a start time, e.g. 09:00 AM"
            />
          </small>
        </div>
--- a/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form } from '@openedx/paragon';
+import { Form } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import './bulkEmailRecepient.scss';
@@ -14,13 +14,7 @@ const DEFAULT_GROUPS = {
 };

 export default function BulkEmailRecipient(props) {
-  const {
-    handleCheckboxes,
-    selectedGroups,
-    additionalCohorts,
-    courseModes,
-  } = props;
-  const hasCourseModes = courseModes && courseModes.length > 1;
+  const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
  return (
    <Form.Group>
      <Form.Label>
@@ -56,24 +50,18 @@ export default function BulkEmailRecipient(props) {
            description="A selectable choice from a list of potential email recipients"
          />
        </Form.Checkbox>
-        {
-          // additional modes
-          hasCourseModes
-          && courseModes.map((courseMode) => (
-            <Form.Checkbox
-              key={`track:${courseMode.slug}`}
-              value={`track:${courseMode.slug}`}
-              disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
-              className="col col-lg-4 col-sm-6 col-12"
-            >
-              <FormattedMessage
-                id="bulk.email.form.mode.label"
-                defaultMessage="Learners in the {courseModeName} Track"
-                values={{ courseModeName: courseMode.name }}
-              />
-            </Form.Checkbox>
-          ))
-        }
+        <Form.Checkbox
+          key="track:verified"
+          value="track:verified"
+          disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
+          className="col col-lg-4 col-sm-6 col-12"
+        >
+          <FormattedMessage
+            id="bulk.email.form.recipients.verified"
+            defaultMessage="Learners in the verified certificate track"
+            description="A selectable choice from a list of potential email recipients"
+          />
+        </Form.Checkbox>
        {
          // additional cohorts
          additionalCohorts
@@ -92,6 +80,18 @@ export default function BulkEmailRecipient(props) {
            </Form.Checkbox>
          ))
        }
+        <Form.Checkbox
+          key="track:audit"
+          value="track:audit"
+          disabled={selectedGroups.find((group) => group === DEFAULT_GROUPS.ALL_LEARNERS)}
+          className="col col-lg-4 col-sm-6 col-12"
+        >
+          <FormattedMessage
+            id="bulk.email.form.recipients.audit"
+            defaultMessage="Learners in the audit track"
+            description="A selectable choice from a list of potential email recipients"
+          />
+        </Form.Checkbox>
        <Form.Checkbox
          key="learners"
          value="learners"
@@ -127,10 +127,4 @@ BulkEmailRecipient.propTypes = {
  handleCheckboxes: PropTypes.func.isRequired,
  isValid: PropTypes.bool,
  additionalCohorts: PropTypes.arrayOf(PropTypes.string),
-  courseModes: PropTypes.arrayOf(
-    PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
 };
--- a/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/index.js
+++ b/src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailRecipient';
--- a/src/components/bulk-email-tool/bulk-email-form/data/factories/bulkEmailFormCourseMode.factory.js
+++ b/src/components/bulk-email-tool/bulk-email-form/data/factories/bulkEmailFormCourseMode.factory.js
@@ -1,22 +0,0 @@
-import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
-
-/**
- * Generates an array of course mode objects using Rosie Factory.
- * @returns {Array<Object>} An array of course mode objects with attributes 'slug' and 'name'.
- */
-const courseModeFactory = () => {
-  const AuditModeFactory = Factory.define('AuditModeFactory')
-    .attr('slug', 'audit')
-    .attr('name', 'Audit');
-
-  const VerifiedModeFactory = Factory.define('VerifiedModeFactory')
-    .attr('slug', 'verified')
-    .attr('name', 'Verified Certificate');
-
-  return [
-    AuditModeFactory.build(),
-    VerifiedModeFactory.build(),
-  ];
-};
-
-export default courseModeFactory;
--- a/src/components/bulk-email-tool/bulk-email-form/index.js
+++ b/src/components/bulk-email-tool/bulk-email-form/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailForm';
--- a/src/components/bulk-email-tool/bulk-email-form/messages.js
+++ b/src/components/bulk-email-tool/bulk-email-form/messages.js
@@ -41,11 +41,6 @@ const messages = defineMessages({
    defaultMessage: 'Subject',
    description: 'Email subject line input label. Meant to have colon or equivilant punctuation.',
  },
-  bulkEmailFormSubjectTip: {
-    id: 'bulk.email.form.subject.tip',
-    defaultMessage: '(Maximum 128 characters)',
-    description: 'Default Subject tip',
-  },
  bulkEmailFormSubjectError: {
    id: 'bulk.email.form.subject.error',
    defaultMessage: 'A subject is required',
--- a/src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx
@@ -12,7 +12,6 @@ import * as bulkEmailFormApi from '../data/api';
 import { BulkEmailContext, BulkEmailProvider } from '../../bulk-email-context';
 import { formatDate } from '../../../../utils/formatDateAndTime';
 import cohortFactory from '../data/__factories__/bulkEmailFormCohort.factory';
-import courseModeFactory from '../data/__factories__/bulkEmailFormCourseMode.factory';

 jest.mock('../../text-editor/TextEditor');

@@ -21,17 +20,12 @@ const dispatchMock = jest.fn();

 const tomorrow = new Date();
 tomorrow.setDate(new Date().getDate() + 1);
-const courseMode = courseModeFactory();

 function renderBulkEmailForm() {
  const { cohorts } = cohortFactory.build();
  return (
    <BulkEmailProvider>
-      <BulkEmailForm
-        courseId="test"
-        cohorts={cohorts}
-        courseModes={courseMode}
-      />
+      <BulkEmailForm courseId="test" cohorts={cohorts} />
    </BulkEmailProvider>
  );
 }
@@ -39,7 +33,7 @@ function renderBulkEmailForm() {
 function renderBulkEmailFormContext(value) {
  return (
    <BulkEmailContext.Provider value={[value, dispatchMock]}>
-      <BulkEmailForm courseId="test" courseModes={courseMode} />
+      <BulkEmailForm courseId="test" />
    </BulkEmailContext.Provider>
  );
 }
@@ -102,8 +96,8 @@ describe('bulk-email-form', () => {
  test('Checking "All Learners" disables each learner group', async () => {
    render(renderBulkEmailForm());
    fireEvent.click(screen.getByRole('checkbox', { name: 'All Learners' }));
-    const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the Verified Certificate Track' });
-    const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the Audit Track' });
+    const verifiedLearners = screen.getByRole('checkbox', { name: 'Learners in the verified certificate track' });
+    const auditLearners = screen.getByRole('checkbox', { name: 'Learners in the audit track' });
    const { cohorts } = cohortFactory.build();
    cohorts.forEach(cohort => expect(screen.getByRole('checkbox', { name: `Cohort: ${cohort}` })).toBeDisabled());
    expect(verifiedLearners).toBeDisabled();
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
@@ -1,21 +1,18 @@
-/* eslint-disable react/no-unstable-nested-components */
-
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import {
  Button, Collapsible, Icon,
-} from '@openedx/paragon';
-import { SpinnerSimple } from '@openedx/paragon/icons';
+} from '@edx/paragon';
+import { SpinnerSimple } from '@edx/paragon/icons';
 import messages from './messages';
 import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 import ViewEmailModal from './ViewEmailModal';

-function BulkEmailContentHistory() {
-  const intl = useIntl();
+function BulkEmailContentHistory({ intl }) {
  const { courseId } = useParams();
  const [emailHistoryData, setEmailHistoryData] = useState();
  const [errorRetrievingData, setErrorRetrievingData] = useState(false);
@@ -52,15 +49,17 @@ function BulkEmailContentHistory() {
   * up a level (the `subject` field). We also convert the `sent_to` data to be a String rather than an array to fix a
   * display bug in the table.
   */
-  const transformDataForTable = useMemo(() => {
-    const tableData = emailHistoryData?.map((item) => ({
-      ...item,
-      subject: item.email.subject,
-      sent_to: item.sent_to.join(', '),
-      created: new Date(item.created).toLocaleString(),
-    }));
-    return tableData || [];
-  }, [emailHistoryData]);
+  function transformDataForTable() {
+    let tableData = [];
+    if (emailHistoryData) {
+      tableData = emailHistoryData.map((item) => ({
+        ...item,
+        subject: item.email.subject,
+        sent_to: item.sent_to.join(', '),
+      }));
+    }
+    return tableData;
+  }

  /**
   * This function is responsible for setting the current `messageContent` state data. This will be the contents of a
@@ -101,7 +100,7 @@ function BulkEmailContentHistory() {
   * contents of a previously sent message.
   */
  const additionalColumns = () => {
-    const tableData = transformDataForTable;
+    const tableData = transformDataForTable();

    return [
      {
@@ -132,13 +131,12 @@ function BulkEmailContentHistory() {
          styling="card"
          title={intl.formatMessage(messages.emailHistoryTableSectionButton)}
          className="mb-3"
-          // eslint-disable-next-line react/jsx-no-bind
          onOpen={fetchSentEmailHistoryData}
        >
          {showHistoricalEmailContentTable ? (
            <BulkEmailTaskManagerTable
              errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={transformDataForTable()}
              tableDescription={intl.formatMessage(messages.emailHistoryTableViewMessageInstructions)}
              alertWarningMessage={intl.formatMessage(messages.noEmailData)}
              alertErrorMessage={intl.formatMessage(messages.errorFetchingEmailHistoryData)}
@@ -155,6 +153,7 @@ function BulkEmailContentHistory() {
 }

 BulkEmailContentHistory.propTypes = {
+  intl: intlShape.isRequired,
  row: PropTypes.shape({
    index: PropTypes.number,
  }),
@@ -164,4 +163,4 @@ BulkEmailContentHistory.defaultProps = {
  row: {},
 };

-export default BulkEmailContentHistory;
+export default injectIntl(BulkEmailContentHistory);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailHistoryTable.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailHistoryTable.jsx
@@ -1,4 +1,4 @@
-import { Alert, DataTable } from '@openedx/paragon';
+import { Alert, DataTable } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React from 'react';

@@ -71,12 +71,12 @@ export default function BulkEmailTaskManagerTable(props) {

 BulkEmailTaskManagerTable.propTypes = {
  errorRetrievingData: PropTypes.bool.isRequired,
-  tableData: PropTypes.arrayOf(PropTypes.shape({})),
+  tableData: PropTypes.arrayOf(PropTypes.object),
  tableDescription: PropTypes.string,
  alertWarningMessage: PropTypes.string.isRequired,
  alertErrorMessage: PropTypes.string.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  additionalColumns: PropTypes.arrayOf(PropTypes.shape({})),
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  additionalColumns: PropTypes.arrayOf(PropTypes.object),
 };

 BulkEmailTaskManagerTable.defaultProps = {
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getInstructorTasks } from './data/api';
 import messages from './messages';
 import useInterval from '../../../utils/useInterval';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';

-function BulkEmailPendingTasks() {
-  const intl = useIntl();
+function BulkEmailPendingTasks({ intl }) {
  const { courseId } = useParams();

  const [instructorTaskData, setInstructorTaskData] = useState();
@@ -90,4 +89,8 @@ function BulkEmailPendingTasks() {
  );
 }

-export default BulkEmailPendingTasks;
+BulkEmailPendingTasks.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailPendingTasks);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
@@ -1,40 +1,34 @@
 import React from 'react';
-import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
-import { Hyperlink, Alert } from '@openedx/paragon';
-import { WarningFilled } from '@openedx/paragon/icons';
+import { Hyperlink, Alert } from '@edx/paragon';
+import { WarningFilled } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

-export default function BulkEmailPendingTasksAlert(props) {
-  const { courseId } = props;
-
+export default function BulkEmailPendingTasksAlert() {
  return (
-    <Alert variant="warning" icon={WarningFilled}>
-      <FormattedMessage
-        id="bulk.email.pending.tasks.description.one"
-        defaultMessage="To view all pending tasks, including email, visit&nbsp;"
-      />
-      <Hyperlink
-        destination={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
-        target="_blank"
-        isInline
-        showLaunchIcon={false}
-      >
+    <>
+      <Alert variant="warning" icon={WarningFilled}>
        <FormattedMessage
-          id="bulk.email.pending.tasks.link"
-          defaultMessage="Course Info"
+          id="bulk.email.pending.tasks.description.one"
+          defaultMessage="To view all pending tasks, including email, visit&nbsp;"
        />
-      </Hyperlink>
-      <FormattedMessage
-        id="bulk.email.pending.tasks.description.two"
-        defaultMessage="&nbsp;in the Instructor Dashboard."
-      />
-    </Alert>
-
+        <Hyperlink
+          destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+          target="_blank"
+          isInline
+          showLaunchIcon={false}
+        >
+          <FormattedMessage
+            id="bulk.email.pending.tasks.link"
+            defaultMessage="Course Info"
+          />
+        </Hyperlink>
+        <FormattedMessage
+          id="bulk.email.pending.tasks.description.two"
+          defaultMessage="&nbsp;in the Instructor Dashboard."
+        />
+      </Alert>
+    </>
  );
 }
-
-BulkEmailPendingTasksAlert.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

-import { Icon, Collapsible } from '@openedx/paragon';
-import { SpinnerSimple } from '@openedx/paragon/icons';
+import { Icon, Collapsible } from '@edx/paragon';
+import { SpinnerSimple } from '@edx/paragon/icons';
 import { getEmailTaskHistory } from './data/api';
 import messages from './messages';

@@ -11,8 +11,7 @@ import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';

 import './bulkEmailTaskHistory.scss';

-function BulkEmailTaskHistory() {
-  const intl = useIntl();
+function BulkEmailTaskHistory({ intl }) {
  const { courseId } = useParams();

  const [emailTaskHistoryData, setEmailTaskHistoryData] = useState([]);
@@ -42,14 +41,6 @@ function BulkEmailTaskHistory() {
    setShowHistoricalTaskContentTable(true);
  }

-  const transformDataForTable = useMemo(() => {
-    const tableData = emailTaskHistoryData?.map((item) => ({
-      ...item,
-      created: new Date(item.created).toLocaleString(),
-    }));
-    return tableData || [];
-  }, [emailTaskHistoryData]);
-
  const tableColumns = [
    {
      Header: `${intl.formatMessage(messages.taskHistoryTableColumnHeaderTaskType)}`,
@@ -98,13 +89,12 @@ function BulkEmailTaskHistory() {
        <Collapsible
          styling="card"
          title={intl.formatMessage(messages.emailTaskHistoryTableSectionButton)}
-          // eslint-disable-next-line react/jsx-no-bind
          onOpen={fetchEmailTaskHistoryData}
        >
          {showHistoricalTaskContentTable ? (
            <BulkEmailTaskManagerTable
              errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable}
+              tableData={emailTaskHistoryData}
              alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
              alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
              columns={tableColumns}
@@ -118,4 +108,8 @@ function BulkEmailTaskHistory() {
  );
 }

-export default BulkEmailTaskHistory;
+BulkEmailTaskHistory.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailTaskHistory);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import BulkEmailContentHistory from './BulkEmailContentHistory';
 import BulkEmailTaskHistory from './BulkEmailTaskHistory';
@@ -9,8 +8,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';

-function BulkEmailTaskManager({ courseId }) {
-  const intl = useIntl();
+function BulkEmailTaskManager({ intl }) {
  return (
    <div className="w-100">
      {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -28,14 +26,14 @@ function BulkEmailTaskManager({ courseId }) {
      </div>
      <div className="border-top border-primary-500 pt-4.5">
        <h2 className="h3 mb-4 text-primary-500">{intl.formatMessage(messages.pendingTasksHeader)}</h2>
-        <BulkEmailPendingTasksAlert courseId={courseId} />
+        <BulkEmailPendingTasksAlert />
      </div>
    </div>
  );
 }

 BulkEmailTaskManager.propTypes = {
-  courseId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
 };

-export default BulkEmailTaskManager;
+export default injectIntl(BulkEmailTaskManager);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
@@ -1,25 +1,21 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Modal } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
 import { copyToEditor } from '../bulk-email-form/data/actions';

 function ViewEmailModal({
-  messageContent, isOpen, setModalOpen,
+  intl, messageContent, isOpen, setModalOpen,
 }) {
-  const intl = useIntl();
  const [, dispatch] = useContext(BulkEmailContext);
  return (
    <div>
-      <ModalDialog
-        isOpen={isOpen}
-        onClose={() => setModalOpen(false)}
-        hasCloseButton
-      >
-        <ModalDialog.Body>
-
+      <Modal
+        open={isOpen}
+        title=""
+        body={(
          <div>
            <div className="d-flex flex-row">
              <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -44,35 +40,30 @@ function ViewEmailModal({
              <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
            </div>
          </div>
-        </ModalDialog.Body>
-        <ModalDialog.Footer>
-          <ActionRow>
-            <ModalDialog.CloseButton variant="link">
-              <FormattedMessage id="bulk.email.tool.close.modalDialog.button" defaultMessage="Close" />
-            </ModalDialog.CloseButton>
-            <Button
-              onClick={() => {
-                dispatch(
-                  copyToEditor({
-                    emailBody: messageContent.email.html_message,
-                    emailSubject: messageContent.subject,
-                  }),
-                );
-                setModalOpen(false);
-              }}
-              variant="primary"
-            >
-              <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
-
-            </Button>
-          </ActionRow>
-        </ModalDialog.Footer>
-      </ModalDialog>
+        )}
+        onClose={() => setModalOpen(false)}
+        buttons={[
+          <Button
+            onClick={() => {
+              dispatch(
+                copyToEditor({
+                  emailBody: messageContent.email.html_message,
+                  emailSubject: messageContent.subject,
+                }),
+              );
+              setModalOpen(false);
+            }}
+          >
+            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+          </Button>,
+        ]}
+      />
    </div>
  );
 }

 ViewEmailModal.propTypes = {
+  intl: intlShape.isRequired,
  messageContent: PropTypes.shape({
    subject: PropTypes.string,
    requester: PropTypes.string,
@@ -86,4 +77,4 @@ ViewEmailModal.propTypes = {
  setModalOpen: PropTypes.func.isRequired,
 };

-export default ViewEmailModal;
+export default injectIntl(ViewEmailModal);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx
@@ -1,16 +1,14 @@
 /* eslint-disable react/prop-types */
-/* eslint-disable react/no-unstable-nested-components */
-
 import React, {
  useCallback, useContext, useState, useEffect,
 } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert, DataTable, Icon, IconButton, useToggle,
-} from '@openedx/paragon';
+} from '@edx/paragon';
 import {
  Delete, Info, Visibility, Edit,
-} from '@openedx/paragon/icons';
+} from '@edx/paragon/icons';
 import { useParams } from 'react-router-dom';
 import { BulkEmailContext } from '../../bulk-email-context';
 import { deleteScheduledEmailThunk, getScheduledBulkEmailThunk } from './data/thunks';
@@ -26,14 +24,12 @@ function flattenScheduledEmailsArray(emails) {
    emailId: email.courseEmail.id,
    task: email.task,
    taskDue: new Date(email.taskDue).toLocaleString(),
-    taskDueUTC: email.taskDue,
    ...email.courseEmail,
    targets: email.courseEmail.targets.join(', '),
  }));
 }

-function BulkEmailScheduledEmailsTable() {
-  const intl = useIntl();
+function BulkEmailScheduledEmailsTable({ intl }) {
  const { courseId } = useParams();
  const [{ scheduledEmailsTable }, dispatch] = useContext(BulkEmailContext);
  const [tableData, setTableData] = useState([]);
@@ -93,10 +89,10 @@ function BulkEmailScheduledEmailsTable() {
  const handleEditEmail = (row) => {
    const {
      original: {
-        htmlMessage: emailBody, subject: emailSubject, taskDueUTC, targets, schedulingId, emailId,
+        htmlMessage: emailBody, subject: emailSubject, taskDue, targets, schedulingId, emailId,
      },
    } = row;
-    const dateTime = new Date(taskDueUTC);
+    const dateTime = new Date(taskDue);
    const emailRecipients = targets.replaceAll('-', ':').split(', ');
    const scheduleDate = formatDate(dateTime);
    const scheduleTime = formatTime(dateTime);
@@ -197,4 +193,8 @@ function BulkEmailScheduledEmailsTable() {
  );
 }

-export default BulkEmailScheduledEmailsTable;
+BulkEmailScheduledEmailsTable.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(BulkEmailScheduledEmailsTable);
--- a/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/index.js
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailScheduledEmailsTable';
--- a/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/messages.js
@@ -34,10 +34,6 @@ const messages = defineMessages({
    id: 'bulk.email.content.history.table.modal.messageBody',
    defaultMessage: 'Message:',
  },
-  modalCloseButton: {
-    id: 'bulk.email.tool.close.modalDialog.button',
-    defaultMessage: 'Close',
-  },
  emailHistoryTableViewMessageInstructions: {
    id: 'bulk.email.content.history.table.viewMessageInstructions',
    defaultMessage: 'To read a sent email message, click the `View Message` button within the table.',
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
@@ -3,7 +3,7 @@
 */
 import React from 'react';
 import {
-  render, screen, fireEvent, cleanup, initializeMockApp,
+  render, screen, fireEvent, cleanup, act, initializeMockApp,
 } from '../../../../setupTest';
 import { BulkEmailProvider } from '../../bulk-email-context';
 import BulkEmailContentHistory from '../BulkEmailContentHistory';
@@ -41,99 +41,105 @@ describe('BulkEmailContentHistory component', () => {
  });

  test('renders a table when the button is pressed and data is returned', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(1);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(1);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);

-    render(renderBulkEmailContentHistory());
+      render(renderBulkEmailContentHistory());

-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);

-    // verify component structure
-    const tableDescription = await screen.findByText(
-      'To read a sent email message, click the `View Message` button within the table.',
-    );
-    expect(tableDescription).toBeTruthy();
+      // verify component structure
+      const tableDescription = await screen.findByText(
+        'To read a sent email message, click the `View Message` button within the table.',
+      );
+      expect(tableDescription).toBeTruthy();

-    // verify table structure
-    expect(await screen.findByText('Subject')).toBeTruthy();
-    expect(await screen.findByText('Sent By')).toBeTruthy();
-    expect(await screen.findByText('Sent To')).toBeTruthy();
-    expect(await screen.findByText('Time Sent')).toBeTruthy();
-    expect(await screen.findByText('Number Sent')).toBeTruthy();
+      // verify table structure
+      expect(await screen.findByText('Subject')).toBeTruthy();
+      expect(await screen.findByText('Sent By')).toBeTruthy();
+      expect(await screen.findByText('Sent To')).toBeTruthy();
+      expect(await screen.findByText('Time Sent')).toBeTruthy();
+      expect(await screen.findByText('Number Sent')).toBeTruthy();

-    // verify table contents
-    const { emails } = emailHistoryData;
-    const email = emails[0];
-    const createdDate = new Date(email.created).toLocaleString();
-    expect(await screen.findByText(createdDate)).toBeTruthy();
-    expect(await screen.findByText(email.number_sent)).toBeTruthy();
-    expect(await screen.findByText(email.requester)).toBeTruthy();
-    expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
-    expect(await screen.findByText(email.email.subject)).toBeTruthy();
-    // verify screen reader only <span />
-    expect(await screen.findByText('0')).toHaveClass('sr-only');
-    expect(await screen.findAllByText('View Message')).toBeTruthy();
+      // verify table contents
+      const { emails } = emailHistoryData;
+      const email = emails[0];
+      expect(await screen.findByText(email.created)).toBeTruthy();
+      expect(await screen.findByText(email.number_sent)).toBeTruthy();
+      expect(await screen.findByText(email.requester)).toBeTruthy();
+      expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
+      expect(await screen.findByText(email.email.subject)).toBeTruthy();
+      // verify screen reader only <span />
+      expect(await screen.findByText('0')).toHaveClass('sr-only');
+      expect(await screen.findAllByText('View Message')).toBeTruthy();
+    });
  });

  test('renders a modal that will display the contents of the previously sent message to a user', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(1);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(1);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);

-    render(renderBulkEmailContentHistory());
+      render(renderBulkEmailContentHistory());

-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);

-    const viewMessageButton = await screen.findByText('View Message');
-    fireEvent.click(viewMessageButton);
+      const viewMessageButton = await screen.findByText('View Message');
+      fireEvent.click(viewMessageButton);

-    // verify modal components and behavior
-    const { emails } = emailHistoryData;
-    const email = emails[0];
-    const closeButton = await screen.findAllByText('Close');
+      // verify modal components and behavior
+      const { emails } = emailHistoryData;
+      const email = emails[0];
+      const closeButton = await screen.findAllByText('Close');

-    expect(closeButton).toBeTruthy();
-    expect(await screen.findByText('Subject:')).toBeTruthy();
-    expect(await screen.findByText('Sent by:')).toBeTruthy();
-    expect(await screen.findByText('Time sent:')).toBeTruthy();
-    expect(await screen.findByText('Sent to:')).toBeTruthy();
-    expect(await screen.findByText('Message:')).toBeTruthy();
-    expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
-    expect(await screen.findAllByText(email.requester)).toBeTruthy();
-    const createdDate = new Date(email.created).toLocaleString();
-    expect(await screen.findAllByText(createdDate)).toBeTruthy();
-    expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
-    // .replace() call strips the HTML tags from the string
-    expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
+      expect(closeButton).toBeTruthy();
+      expect(await screen.findByText('Subject:')).toBeTruthy();
+      expect(await screen.findByText('Sent by:')).toBeTruthy();
+      expect(await screen.findByText('Time sent:')).toBeTruthy();
+      expect(await screen.findByText('Sent to:')).toBeTruthy();
+      expect(await screen.findByText('Message:')).toBeTruthy();
+      expect(await screen.findAllByText(email.email.subject)).toBeTruthy();
+      expect(await screen.findAllByText(email.requester)).toBeTruthy();
+      expect(await screen.findAllByText(email.created)).toBeTruthy();
+      expect(await screen.findAllByText(email.sent_to.join(', '))).toBeTruthy();
+      // .replace() call strips the HTML tags from the string
+      expect(await screen.findByText(email.email.html_message.replace(/<[^>]*>?/gm, ''))).toBeTruthy();
+    });
  });

  test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
-    const emailHistoryData = buildEmailContentHistoryData(0);
-    getSentEmailHistory.mockImplementation(() => emailHistoryData);
-    // render the component
-    render(renderBulkEmailContentHistory());
-    // press the `show sent email history` button to initiate data retrieval
-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText('There is no email history for this course.');
-    expect(alertMessage).toBeTruthy();
+    await act(async () => {
+      const emailHistoryData = buildEmailContentHistoryData(0);
+      getSentEmailHistory.mockImplementation(() => emailHistoryData);
+      // render the component
+      render(renderBulkEmailContentHistory());
+      // press the `show sent email history` button to initiate data retrieval
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText('There is no email history for this course.');
+      expect(alertMessage).toBeTruthy();
+    });
  });

  test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
-    getSentEmailHistory.mockImplementation(() => {
-      throw new Error();
+    await act(async () => {
+      getSentEmailHistory.mockImplementation(() => {
+        throw new Error();
+      });
+      // render the component
+      render(renderBulkEmailContentHistory());
+      // press the `show sent email history` button to initiate data retrieval
+      const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
+      fireEvent.click(showEmailContentHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText(
+        'An error occurred retrieving email history data for this course. Please try again later.',
+      );
+      expect(alertMessage).toBeTruthy();
    });
-    // render the component
-    render(renderBulkEmailContentHistory());
-    // press the `show sent email history` button to initiate data retrieval
-    const showEmailContentHistoryButton = await screen.findByText('Show Sent Email History');
-    fireEvent.click(showEmailContentHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText(
-      'An error occurred retrieving email history data for this course. Please try again later.',
-    );
-    expect(alertMessage).toBeTruthy();
  });
 });
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasks.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasks.test.jsx
@@ -61,7 +61,7 @@ describe('BulkEmailPendingTasks component', () => {
    expect(await screen.findByText('State')).toBeTruthy();
    expect(await screen.findByText('Status')).toBeTruthy();
    expect(await screen.findByText('Task Progress')).toBeTruthy();
-    expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
+    expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();

    // verification of table contents
    const { tasks } = pendingInstructorTaskData;
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasksAlert.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasksAlert.test.jsx
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import BulkEmailPendingTasksAlert from '../BulkEmailPendingTasksAlert';
-import {
-  initializeMockApp, render, screen,
-} from '../../../../setupTest';
-
-describe('Testing BulkEmailPendingTasksAlert Component', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('Render without Public path', async () => {
-    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Course Info');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-  });
-
-  test('Render with Public path', async () => {
-    Object.defineProperty(window, 'location', {
-      get() {
-        return { pathname: '/communications/courses/test-course-id/bulk-email' };
-      },
-    });
-
-    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Course Info');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
-  });
-});
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx
@@ -3,7 +3,7 @@
 */
 import React from 'react';
 import {
-  render, screen, fireEvent, cleanup, initializeMockApp,
+  render, screen, fireEvent, cleanup, act, initializeMockApp,
 } from '../../../../setupTest';
 import BulkEmailTaskHistory from '../BulkEmailTaskHistory';
 import { getEmailTaskHistory } from '../data/api';
@@ -32,66 +32,71 @@ describe('BulkEmailTaskHistory component', () => {
  });

  test('renders a table properly when the button is pressed and data is returned', async () => {
-    // build our mocked response
-    const taskHistoryData = buildEmailTaskHistoryData(1);
-    getEmailTaskHistory.mockImplementation(() => taskHistoryData);
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history button` to initiate data retrieval and rendering of the table in our component
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verification of table structure
-    expect(await screen.findByText('Task Type')).toBeTruthy();
-    expect(await screen.findByText('Task Inputs')).toBeTruthy();
-    expect(await screen.findByText('Task Id')).toBeTruthy();
-    expect(await screen.findByText('Requester')).toBeTruthy();
-    expect(await screen.findByText('Submitted')).toBeTruthy();
-    expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
-    expect(await screen.findByText('State')).toBeTruthy();
-    expect(await screen.findByText('Status')).toBeTruthy();
-    expect(await screen.findByText('Task Progress')).toBeTruthy();
-    expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
-    // verification of row contents
-    const { tasks } = taskHistoryData;
-    const task = tasks[0];
-    const createdDate = new Date(task.created).toLocaleString();
-    expect(await screen.findByText(createdDate)).toBeTruthy();
-    expect(await screen.findByText(task.duration_sec)).toBeTruthy();
-    expect(await screen.findByText(task.requester)).toBeTruthy();
-    expect(await screen.findByText(task.status)).toBeTruthy();
-    expect(await screen.findByText(task.task_id)).toBeTruthy();
-    expect(await screen.findByText(task.task_input)).toBeTruthy();
-    expect(await screen.findByText(task.task_message)).toBeTruthy();
-    expect(await screen.findByText(task.task_state)).toBeTruthy();
-    expect(await screen.findByText(task.task_type)).toBeTruthy();
+    await act(async () => {
+      // build our mocked response
+      const taskHistoryData = buildEmailTaskHistoryData(1);
+      getEmailTaskHistory.mockImplementation(() => taskHistoryData);
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history button` to initiate data retrieval and rendering of the table in our component
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verification of table structure
+      expect(await screen.findByText('Task Type')).toBeTruthy();
+      expect(await screen.findByText('Task Inputs')).toBeTruthy();
+      expect(await screen.findByText('Task Id')).toBeTruthy();
+      expect(await screen.findByText('Requester')).toBeTruthy();
+      expect(await screen.findByText('Submitted')).toBeTruthy();
+      expect(await screen.findByText('Duration (seconds)')).toBeTruthy();
+      expect(await screen.findByText('State')).toBeTruthy();
+      expect(await screen.findByText('Status')).toBeTruthy();
+      expect(await screen.findByText('Task Progress')).toBeTruthy();
+      expect(await screen.findAllByText('Showing 1 of 1.')).toBeTruthy();
+      // verification of row contents
+      const { tasks } = taskHistoryData;
+      const task = tasks[0];
+      expect(await screen.findByText(task.created)).toBeTruthy();
+      expect(await screen.findByText(task.duration_sec)).toBeTruthy();
+      expect(await screen.findByText(task.requester)).toBeTruthy();
+      expect(await screen.findByText(task.status)).toBeTruthy();
+      expect(await screen.findByText(task.task_id)).toBeTruthy();
+      expect(await screen.findByText(task.task_input)).toBeTruthy();
+      expect(await screen.findByText(task.task_message)).toBeTruthy();
+      expect(await screen.findByText(task.task_state)).toBeTruthy();
+      expect(await screen.findByText(task.task_type)).toBeTruthy();
+    });
  });

  test('renders a warning Alert when the button is pressed but there is no data to display', async () => {
-    const taskHistoryData = buildEmailTaskHistoryData(0);
-    getEmailTaskHistory.mockImplementation(() => taskHistoryData);
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history` button to initiate data retrieval
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText('There is no email task history for this course.');
-    expect(alertMessage).toBeTruthy();
+    await act(async () => {
+      const taskHistoryData = buildEmailTaskHistoryData(0);
+      getEmailTaskHistory.mockImplementation(() => taskHistoryData);
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history` button to initiate data retrieval
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText('There is no email task history for this course.');
+      expect(alertMessage).toBeTruthy();
+    });
  });

  test('renders an error Alert when the button is pressed and an error occurs retrieving data', async () => {
-    getEmailTaskHistory.mockImplementation(() => {
-      throw new Error();
+    await act(async () => {
+      getEmailTaskHistory.mockImplementation(() => {
+        throw new Error();
+      });
+      // render the component
+      render(<BulkEmailTaskHistory />);
+      // press the `show task history` button to initiate data retrieval
+      const showTaskHistoryButton = await screen.findByText('Show Email Task History');
+      fireEvent.click(showTaskHistoryButton);
+      // verify that an alert is displayed since the array of tasks is empty
+      const alertMessage = await screen.findByText(
+        'Error fetching email task history data for this course. Please try again later.',
+      );
+      expect(alertMessage).toBeTruthy();
    });
-    // render the component
-    render(<BulkEmailTaskHistory />);
-    // press the `show task history` button to initiate data retrieval
-    const showTaskHistoryButton = await screen.findByText('Show Email Task History');
-    fireEvent.click(showTaskHistoryButton);
-    // verify that an alert is displayed since the array of tasks is empty
-    const alertMessage = await screen.findByText(
-      'Error fetching email task history data for this course. Please try again later.',
-    );
-    expect(alertMessage).toBeTruthy();
  });
 });
--- a/src/components/bulk-email-tool/index.js
+++ b/src/components/bulk-email-tool/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailTool';
--- a/src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx
+++ b/src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 function TaskAlertModal(props) {
  const {
-    isOpen, close, alertMessage,
+    isOpen, close, alertMessage, intl,
  } = props;
-  const intl = useIntl();
+
  const messages = {
    taskAlertTitle: {
      id: 'bulk.email.task.alert.title',
@@ -40,7 +40,6 @@ function TaskAlertModal(props) {
                // causing strange click event target issues in safari. To solve this, we want to
                // wrap the string in a fragment instead of a span, so that the whole button considered
                // a "button" target, and not a "span inside a button"
-                // eslint-disable-next-line react/jsx-no-useless-fragment
                msg => <>{msg}</>
              }
            </FormattedMessage>
@@ -57,6 +56,7 @@ TaskAlertModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  close: PropTypes.func.isRequired,
  alertMessage: PropTypes.node.isRequired,
+  intl: intlShape.isRequired,
 };

-export default TaskAlertModal;
+export default injectIntl(TaskAlertModal);
--- a/src/components/bulk-email-tool/task-alert-modal/index.js
+++ b/src/components/bulk-email-tool/task-alert-modal/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './TaskAlertModal';
--- a/src/components/bulk-email-tool/text-editor/TextEditor.jsx
+++ b/src/components/bulk-email-tool/text-editor/TextEditor.jsx
@@ -17,8 +17,8 @@ import 'tinymce/plugins/image';
 import 'tinymce/plugins/codesample';
 import '@edx/tinymce-language-selector';

-import contentUiCss from 'tinymce/skins/ui/oxide/content.css?raw';
-import contentCss from 'tinymce/skins/content/default/content.css?raw';
+import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
+import contentCss from 'tinymce/skins/content/default/content.css';

 export default function TextEditor(props) {
  const {
@@ -43,8 +43,6 @@ export default function TextEditor(props) {
        block_unsupported_drop: false,
        image_advtab: true,
        name: 'emailBody',
-        relative_urls: false,
-        remove_script_host: false,
      }}
      onEditorChange={onChange}
      value={value}
--- a/src/components/bulk-email-tool/text-editor/index.js
+++ b/src/components/bulk-email-tool/text-editor/index.js
@@ -1,2 +1 @@
-// eslint-disable-next-line no-restricted-exports
 export { default } from './TextEditor';
--- a/src/components/navigation-tabs/BackToInstructor.jsx
+++ b/src/components/navigation-tabs/BackToInstructor.jsx
@@ -1,19 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@openedx/paragon';
-import { ArrowBack } from '@openedx/paragon/icons';
-
-export default function BackToInstructor(props) {
-  const { courseId } = props;
+import { Button, Icon } from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';

+export default function BackToInstructor() {
  return (
    <Button
      variant="tertiary"
      className="mb-4.5 ml-n4.5 text-primary-500"
-      href={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
+      href={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
    >
      <Icon
        src={ArrowBack}
@@ -27,7 +24,3 @@ export default function BackToInstructor(props) {
    </Button>
  );
 }
-
-BackToInstructor.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};
--- a/src/components/navigation-tabs/BackToInstructor.test.jsx
+++ b/src/components/navigation-tabs/BackToInstructor.test.jsx
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import BackToInstructor from './BackToInstructor';
-import {
-  initializeMockApp, render, screen,
-} from '../../setupTest';
-
-describe('Testing BackToInstructor Component', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('Render without Public path', async () => {
-    render(<BackToInstructor courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Back to Instructor Dashboard');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-  });
-
-  test('Render with Public path', async () => {
-    Object.defineProperty(window, 'location', {
-      get() {
-        return { pathname: '/communications/courses/test-course-id/bulk-email' };
-      },
-    });
-
-    render(<BackToInstructor courseId="test-course-id" />);
-
-    const linkEl = await screen.findByText('Back to Instructor Dashboard');
-    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
-    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
-  });
-});
--- a/src/components/navigation-tabs/NavigationTabs.jsx
+++ b/src/components/navigation-tabs/NavigationTabs.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Nav } from '@openedx/paragon';
+import { Nav } from '@edx/paragon';

 export default function NavigationTabs(props) {
  const { tabData } = props;
--- a/src/components/page-container/PageContainer.jsx
+++ b/src/components/page-container/PageContainer.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';

 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
-import { Spinner } from '@openedx/paragon';
+import Footer from '@edx/frontend-component-footer';
+import { Spinner } from '@edx/paragon';

 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';

@@ -39,7 +39,7 @@ export default function PageContainer(props) {
      }

      const {
-        org, number, title, tabs, originalUserIsStaff, courseModes,
+        org, number, title, tabs, originalUserIsStaff,
      } = metadataResponse;
      const { cohorts } = cohortsResponse;

@@ -48,7 +48,6 @@ export default function PageContainer(props) {
        number,
        title,
        originalUserIsStaff,
-        courseModes,
        tabs: [...tabs],
        cohorts: cohorts.map(({ name }) => name),
      });
@@ -67,12 +66,10 @@ export default function PageContainer(props) {
            courseNumber={courseMetadata.number}
            courseTitle={courseMetadata.title}
          />
-          <div className="pb-3 container">
-            <main id="main-content">
-              {children}
-            </main>
-          </div>
-          <FooterSlot />
+          <main>
+            {children}
+          </main>
+          <Footer />
        </>
      </CourseMetadataContext.Provider>
    );
--- a/src/components/page-container/data/api.js
+++ b/src/components/page-container/data/api.js
@@ -1,10 +1,10 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-export const getCourseHomeBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
+const courseHomeBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;

 export async function getCourseHomeCourseMetadata(courseId) {
-  const courseHomeMetadataUrl = `${getCourseHomeBaseUrl()}/${courseId}`;
+  const courseHomeMetadataUrl = `${courseHomeBaseUrl}/${courseId}`;
  const { data } = await getAuthenticatedHttpClient().get(courseHomeMetadataUrl);
  return camelCaseObject(data);
 }
--- a/src/components/page-container/data/api.test.js
+++ b/src/components/page-container/data/api.test.js
@@ -1,24 +0,0 @@
-import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
-import { camelCaseObject } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
-import { initializeMockApp } from '../../../setupTest';
-import * as api from './api';
-import './__factories__/courseMetadata.factory';
-
-describe('api', () => {
-  beforeAll(async () => {
-    await initializeMockApp();
-  });
-
-  test('getCourseHomeCourseMetadata', async () => {
-    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const courseMetadata = Factory.build('courseMetadata');
-    const { id: courseId } = courseMetadata;
-    axiosMock
-      .onGet(`${api.getCourseHomeBaseUrl()}/${courseId}`)
-      .reply(200, courseMetadata);
-    const data = await api.getCourseHomeCourseMetadata(courseId);
-    expect(data).toEqual(camelCaseObject(courseMetadata));
-  });
-});
--- a/src/components/page-container/test/PageContainer.test.jsx
+++ b/src/components/page-container/test/PageContainer.test.jsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
 import {
-  cleanup, initializeMockApp, render, screen,
+  act, cleanup, initializeMockApp, render, screen,
 } from '../../../setupTest';

 import PageContainer from '../PageContainer';
@@ -32,32 +32,36 @@ describe('PageContainer', () => {
  afterEach(cleanup);

  test('PageContainer renders properly when given course metadata', async () => {
-    const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
-    const courseMetadata = Factory.build('courseMetadata');
+    await act(async () => {
+      const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
+      const courseMetadata = Factory.build('courseMetadata');

-    getCohorts.mockImplementation(() => cohorts);
-    getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+      getCohorts.mockImplementation(() => cohorts);
+      getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);

-    render(<PageContainer />);
+      render(<PageContainer />);

-    // Look for the org, title, and number of the course, which should be displayed in the Header.
-    expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
-    expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
+      // Look for the org, title, and number of the course, which should be displayed in the Header.
+      expect(await screen.findByText(`${courseMetadata.org} ${courseMetadata.number}`)).toBeTruthy();
+      expect(await screen.findByText(courseMetadata.title)).toBeTruthy();
+    });
  });

  test('PageContainer renders children nested within it.', async () => {
-    const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
-    const courseMetadata = Factory.build('courseMetadata');
+    await act(async () => {
+      const cohorts = { cohorts: [Factory.build('cohort'), Factory.build('cohort')] };
+      const courseMetadata = Factory.build('courseMetadata');

-    getCohorts.mockImplementation(() => cohorts);
-    getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);
+      getCohorts.mockImplementation(() => cohorts);
+      getCourseHomeCourseMetadata.mockImplementation(() => courseMetadata);

-    render(
-      <PageContainer>
-        <span>Test Text</span>
-      </PageContainer>,
-    );
+      render(
+        <PageContainer>
+          <span>Test Text</span>
+        </PageContainer>,
+      );

-    expect(await screen.findByText('Test Text')).toBeTruthy();
+      expect(await screen.findByText('Test Text')).toBeTruthy();
+    });
  });
 });
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1 +0,0 @@
-export default [];
--- a/src/i18n/index.jsx
+++ b/src/i18n/index.jsx
@@ -0,0 +1,32 @@
+import arMessages from './messages/ar.json';
+import caMessages from './messages/ca.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import zhcnMessages from './messages/zh_CN.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import kokrMessages from './messages/ko_kr.json';
+import plMessages from './messages/pl.json';
+import ptbrMessages from './messages/pt_br.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  'ko-kr': kokrMessages,
+  pl: plMessages,
+  'pt-br': ptbrMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
+};
+
+export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ko_kr.json
+++ b/src/i18n/messages/ko_kr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt_br.json
+++ b/src/i18n/messages/pt_br.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -0,0 +1 @@
+{}
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,54 +2,40 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';

 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
+  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';

-import { Helmet } from 'react-helmet';
-import { Routes, Route } from 'react-router-dom';
-import messages from './i18n';
+import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+import { messages as paragonMessages } from '@edx/paragon';
+import { Switch } from 'react-router-dom';
+import appMessages from './i18n';

 import './index.scss';
 import BulkEmailTool from './components/bulk-email-tool';
 import PageContainer from './components/page-container/PageContainer';

 subscribe(APP_READY, () => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <AppProvider>
-        <Helmet>
-          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-        </Helmet>
-        <Routes>
-          <Route
-            path="/courses/:courseId/bulk_email"
-            element={(
-              <AuthenticatedPageRoute>
-                <PageContainer>
-                  <BulkEmailTool />
-                </PageContainer>
-              </AuthenticatedPageRoute>
-          )}
-          />
-        </Routes>
-      </AppProvider>
-    </StrictMode>,
+  ReactDOM.render(
+    <AppProvider>
+      <div className="pb-3 container">
+        <Switch>
+          <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
+            <PageContainer>
+              <BulkEmailTool />
+            </PageContainer>
+          </AuthenticatedPageRoute>
+        </Switch>
+      </div>
+    </AppProvider>,
+    document.getElementById('root'),
  );
 });

 subscribe(APP_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <ErrorPage message={error.message} />
-    </StrictMode>,
-  );
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });

 initialize({
@@ -64,5 +50,5 @@ initialize({
      );
    },
  },
-  messages,
+  messages: [appMessages, headerMessages, footerMessages, paragonMessages],
 });
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,7 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";

@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/footer";
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -1,67 +0,0 @@
-import {
-  APP_INIT_ERROR, APP_READY, subscribe,
-} from '@edx/frontend-platform';
-
-// Jest needs this for module resolution
-import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-vars
-
-// These need to be var not let so they get hoisted
-// and can be used by jest.mock (which is also hoisted)
-var mockRender; // eslint-disable-line no-var
-var mockCreateRoot; // eslint-disable-line no-var
-jest.mock('react-dom/client', () => {
-  mockRender = jest.fn();
-  mockCreateRoot = jest.fn(() => ({
-    render: mockRender,
-  }));
-
-  return ({
-    createRoot: mockCreateRoot,
-  });
-});
-
-jest.mock('@edx/frontend-platform', () => ({
-  APP_READY: 'app-is-ready-key',
-  APP_INIT_ERROR: 'app-init-error',
-  subscribe: jest.fn(),
-  initialize: jest.fn(),
-  mergeConfig: jest.fn(),
-  getConfig: () => ({
-    FAVICON_URL: 'favicon-url',
-  }),
-  ensureConfig: jest.fn(),
-}));
-
-jest.mock('./components/bulk-email-tool/BulkEmailTool', () => 'Bulk Email Tool');
-jest.mock('./components/page-container/PageContainer', () => 'Page Container');
-
-describe('app registry', () => {
-  let getElement;
-
-  beforeEach(() => {
-    mockCreateRoot.mockClear();
-    mockRender.mockClear();
-
-    getElement = window.document.getElementById;
-    window.document.getElementById = jest.fn(id => ({ id }));
-  });
-  afterAll(() => {
-    window.document.getElementById = getElement;
-  });
-
-  test('subscribe: APP_READY.  links App to root element', () => {
-    const callArgs = subscribe.mock.calls[0];
-    expect(callArgs[0]).toEqual(APP_READY);
-    callArgs[1]();
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
-  });
-  test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
-    const callArgs = subscribe.mock.calls[1];
-    expect(callArgs[0]).toEqual(APP_INIT_ERROR);
-    const error = { message: 'test-error-message' };
-    callArgs[1](error);
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
-  });
-});
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -1,53 +0,0 @@
-# Footer Slot
-
-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the footer.
-
-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
-
-## Example
-
-The following `env.config.jsx` will replace the default footer.
-
-![Screenshot of Default Footer](./images/default_footer.png)
-
-with a simple custom footer
-
-![Screenshot of Custom Footer](./images/custom_footer.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.footer.v1': {
-      plugins: [
-        {
-          // Hide the default footer
-          op: PLUGIN_OPERATIONS.Hide,
-          widgetId: 'default_contents',
-        },
-        {
-          // Insert a custom footer
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_footer',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <h1 style={{textAlign: 'center'}}>🦶</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/FooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/FooterSlot/images/custom_footer.png
--- a/src/plugin-slots/FooterSlot/images/default_footer.png
+++ b/src/plugin-slots/FooterSlot/images/default_footer.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -1,3 +0,0 @@
-# `frontend-app-communications` Plugin Slots
-
-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -8,13 +8,7 @@ import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform
 import { configure as configureLogging, MockLoggingService } from '@edx/frontend-platform/logging';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
-import messages from './i18n';
-
-jest.mock('@edx/frontend-platform/react/hooks', () => ({
-  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
-  useTrackColorSchemeChoice: jest.fn(),
-  useParagonTheme: () => [{ isThemeLoaded: true }, jest.fn()],
-}));
+import appMessages from './i18n';

 Object.defineProperty(window, 'matchMedia', {
  writable: true,
@@ -30,8 +24,6 @@ Object.defineProperty(window, 'matchMedia', {
  })),
 });

-global.Date.prototype.toLocaleDateString = jest.fn();
-
 export function initializeMockApp() {
  mergeConfig({
    // MICROBA-1505: Remove this when we remove the flag from config
@@ -51,7 +43,7 @@ export function initializeMockApp() {
  const i18nService = configureI18n({
    config: getConfig(),
    loggingService,
-    messages,
+    messages: [appMessages],
  });

  const authService = configureAuth(MockAuthService, { config: getConfig(), loggingService });
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +0,0 @@
-{
-  "extends": "@edx/typescript-config",
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "paths": {
-      "*": ["*"]
-    },
-    "rootDir": ".",
-    "outDir": "dist"
-  },
-  "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*", "jest.config.ts"],
-  "exclude": ["*.js", ".eslintrc.js", "dist", "node_modules"]
-}
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 const config = createConfig('webpack-dev');

@@ -22,13 +22,8 @@ const webpack5esmInteropRule = {
  },
 };

-const rawAssetRule = {
-  resourceQuery: /raw/,
-  type: 'asset/source',
-};
-
 const otherRules = config.module.rules;

-config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
+config.module.rules = [webpack5esmInteropRule, ...otherRules];

 module.exports = config;
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 const config = createConfig('webpack-prod');

@@ -14,13 +14,8 @@ const webpack5esmInteropRule = {
  },
 };

-const rawAssetRule = {
-  resourceQuery: /raw/,
-  type: 'asset/source',
-};
-
 const otherRules = config.module.rules;

-config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
+config.module.rules = [webpack5esmInteropRule, ...otherRules];

 module.exports = config;