fix: import FooterSlot from frontend-slot-footer package

feat: remove Transifex calls for OEP-58 for communication app

.env

@@ -19,3 +19,5 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.development

@@ -20,3 +20,5 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.test

@@ -18,3 +18,5 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
+APP_ID=''
+MFE_CONFIG_API_URL=''

.eslintrc.js

@@ -1,3 +1,9 @@
-const { createConfig } = require('@edx/frontend-build');
+/* eslint-disable import/no-extraneous-dependencies */
 
-module.exports = createConfig('eslint');
+const { createConfig } = require('@openedx/frontend-build');
+
+module.exports = createConfig('eslint', {
+  rules: {
+    'react/function-component-definition': 'off',
+  },
+});

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

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

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

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

.github/workflows/ci.yml

@@ -9,18 +9,18 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      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@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -34,4 +34,4 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3

.github/workflows/lockfileversion-check.yml

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

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

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

.github/workflows/update-browserslist-db.yml

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

.gitignore

@@ -17,3 +17,4 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
+src/i18n/messages/

.nvmrc

@@ -1,2 +1,2 @@
-16
+18
 

Makefile

@@ -1,21 +1,17 @@
-transifex_resource = frontend-app-communications
-transifex_langs = "ar,fr,es_419,zh_CN"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-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-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -33,20 +29,19 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/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)
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	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-lib-content-components/src/i18n/messages:frontend-lib-content-components \
+	            translations/frontend-platform/src/i18n/messages:frontend-platform \
+	            translations/frontend-app-communications/src/i18n/messages:frontend-app-communications
+
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-lib-content-components frontend-platform frontend-app-communications
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,45 +1,48 @@
-|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
-==============================
+#############################
 
-Please tag **edx-aperture** on any PRs or issues.  Thanks!
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
 
-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
+*******
 
+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.
 
 Getting started
 ------------
 
 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.
 
-1. Clone the repo into your usual workspace
+Cloning and Startup
+===================
 
-   .. code-block::
+   1. Clone your new repo:
 
-      mkdir -p ~/workspace/
-      cd ~/workspace/
-      git clone https://github.com/edx/frontend-app-communications.git
+   ``git clone https://github.com/edx/frontend-app-communications.git``
 
-2. Install frontend dependencies
+   2. Use node v18.x.
 
-   .. code-block::
+      The current version of the micro-frontend build scripts support node 18.
+      Using other major versions of node *may* work, but this is unsupported.  For
+      convenience, this repository includes an .nvmrc file to help in setting the
+      correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
 
-      npm i
+   3. Install npm dependencies:
 
-3. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
+   ``cd frontend-app-communications && npm install``
 
-   .. code-block::
+   4. Update the application port to use for local development:
+
+      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::
+
+         npm start
 
-      npm start
 
 Environment Variables/Setup Notes
 ---------------------------------
@@ -65,3 +68,101 @@ Tests use `jest` and `react-test-library`. To run all the tests for this repo:
    .. 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 see 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

catalog-info.yaml

@@ -0,0 +1,18 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-app-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: ""
+spec:
+  owner: group:committers-frontend
+  type: "service"
+  lifecycle: "production"

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  

module.config.js.example

@@ -23,9 +23,9 @@ module.exports = {
     **********************************************************************************************/
 
     // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
-    // { 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: '@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/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
   ],
 };

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -33,17 +33,19 @@
     "url": "https://github.com/edx/frontend-app-communications/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.1",
-    "@edx/frontend-component-header": "3.5.0",
-    "@edx/frontend-platform": "2.6.2",
-    "@edx/paragon": "^20.20.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-header": "5.0.2",
+    "@edx/frontend-platform": "7.0.1",
+    "@edx/openedx-atlas": "^0.6.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.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.0.0",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
@@ -51,27 +53,27 @@
     "jquery": "3.6.1",
     "popper.js": "1.16.1",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "redux": "4.2.0",
     "regenerator-runtime": "0.13.11",
     "tinymce": "5.10.7"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-build": "9.2.2",
+    "@edx/browserslist-config": "^1.2.0",
+    "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "13.0.27",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.21.2",
-    "codecov": "3.8.3",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "27.5.1",
     "prettier": "2.8.1",
-    "reactifex": "1.1.1",
     "rosie": "2.1.0"
   }
 }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx"],
+      "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

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 '@edx/paragon';
+import { Container } from '@openedx/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 />
+              <BackToInstructor courseId={courseId} />
               <div className="row pb-4.5">
-                <h1 className="text-primary-500" id="main-content">
+                <h1 className="text-primary-500">
                   <FormattedMessage
                     id="bulk.email.send.email.header"
                     defaultMessage="Send an email"
@@ -33,7 +33,11 @@ export default function BulkEmailTool() {
                 </h1>
               </div>
               <div className="row">
-                <BulkEmailForm courseId={courseId} cohorts={courseMetadata.cohorts} />
+                <BulkEmailForm
+                  courseId={courseId}
+                  cohorts={courseMetadata.cohorts}
+                  courseModes={courseMetadata.courseModes}
+                />
               </div>
               <div className="row py-5">
                 <BulkEmailTaskManager courseId={courseId} />

src/components/bulk-email-tool/bulk-email-context/BulkEmailProvider.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import useAsyncReducer, { combineReducers } from '../../../utils/useAsyncReducer';

src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx

@@ -1,12 +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 '@edx/paragon';
+} from '@openedx/paragon';
 import {
   SpinnerSimple, Cancel, Send, Event, Check,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
@@ -46,7 +47,12 @@ const FORM_ACTIONS = {
 };
 
 function BulkEmailForm(props) {
-  const { courseId, cohorts, intl } = props;
+  const {
+    courseId,
+    cohorts,
+    courseModes,
+    intl,
+  } = props;
   const [{ editor }, dispatch] = useContext(BulkEmailContext);
   const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
   const [emailFormValidation, setEmailFormValidation] = useState({
@@ -205,6 +211,7 @@ function BulkEmailForm(props) {
     } else {
       setEmailFormStatus(FORM_SUBMIT_STATES.DEFAULT);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScheduled, editor.editMode, editor.isLoading, editor.errorRetrievingData, editor.formComplete]);
 
   const AlertMessage = () => (
@@ -270,10 +277,14 @@ 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} />
+          <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>
           {!emailFormValidation.subject && (
             <Form.Control.Feedback className="px-3" hasIcon type="invalid">
               {intl.formatMessage(messages.bulkEmailFormSubjectError)}
@@ -382,6 +393,12 @@ BulkEmailForm.propTypes = {
   courseId: PropTypes.string.isRequired,
   cohorts: PropTypes.arrayOf(PropTypes.string),
   intl: intlShape.isRequired,
+  courseModes: PropTypes.arrayOf(
+    PropTypes.shape({
+      slug: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 };
 
 export default injectIntl(BulkEmailForm);

src/components/bulk-email-tool/bulk-email-form/ScheduleEmailForm.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/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')}>
@@ -30,7 +32,10 @@ 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. 11/27/2023"
+              defaultMessage="Enter a start date, e.g. {date}"
+              values={{
+                date: descriptionDate.toLocaleDateString(),
+              }}
             />
           </small>
         </div>
@@ -52,7 +57,10 @@ 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. 09:00 AM"
+              defaultMessage="Enter a start time, e.g. {time}"
+              values={{
+                time: descriptionDate.toLocaleTimeString([], { timeStyle: 'short' }),
+              }}
             />
           </small>
         </div>

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 '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import './bulkEmailRecepient.scss';
@@ -14,7 +14,13 @@ const DEFAULT_GROUPS = {
 };
 
 export default function BulkEmailRecipient(props) {
-  const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
+  const {
+    handleCheckboxes,
+    selectedGroups,
+    additionalCohorts,
+    courseModes,
+  } = props;
+  const hasCourseModes = courseModes && courseModes.length > 1;
   return (
     <Form.Group>
       <Form.Label>
@@ -50,18 +56,24 @@ export default function BulkEmailRecipient(props) {
             description="A selectable choice from a list of potential email recipients"
           />
         </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 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>
+          ))
+        }
         {
           // additional cohorts
           additionalCohorts
@@ -80,18 +92,6 @@ 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,4 +127,10 @@ 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,
 };

src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailRecipient';

src/components/bulk-email-tool/bulk-email-form/data/__factories__/bulkEmailFormCourseMode.factory.js

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

src/components/bulk-email-tool/bulk-email-form/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailForm';

src/components/bulk-email-tool/bulk-email-form/messages.js

@@ -41,6 +41,11 @@ 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',

src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx

@@ -12,6 +12,7 @@ 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');
 
@@ -20,12 +21,17 @@ 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} />
+      <BulkEmailForm
+        courseId="test"
+        cohorts={cohorts}
+        courseModes={courseMode}
+      />
     </BulkEmailProvider>
   );
 }
@@ -33,7 +39,7 @@ function renderBulkEmailForm() {
 function renderBulkEmailFormContext(value) {
   return (
     <BulkEmailContext.Provider value={[value, dispatchMock]}>
-      <BulkEmailForm courseId="test" />
+      <BulkEmailForm courseId="test" courseMode={courseMode} />
     </BulkEmailContext.Provider>
   );
 }
@@ -96,8 +102,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();

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+/* eslint-disable react/no-unstable-nested-components */
+
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import {
   Button, Collapsible, Icon,
-} from '@edx/paragon';
-import { SpinnerSimple } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { SpinnerSimple } from '@openedx/paragon/icons';
 import messages from './messages';
 import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
@@ -49,17 +51,15 @@ function BulkEmailContentHistory({ intl }) {
    * 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.
    */
-  function transformDataForTable() {
-    let tableData = [];
-    if (emailHistoryData) {
-      tableData = emailHistoryData.map((item) => ({
-        ...item,
-        subject: item.email.subject,
-        sent_to: item.sent_to.join(', '),
-      }));
-    }
-    return tableData;
-  }
+  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]);
 
   /**
    * This function is responsible for setting the current `messageContent` state data. This will be the contents of a
@@ -100,7 +100,7 @@ function BulkEmailContentHistory({ intl }) {
    * contents of a previously sent message.
    */
   const additionalColumns = () => {
-    const tableData = transformDataForTable();
+    const tableData = transformDataForTable;
 
     return [
       {
@@ -131,12 +131,13 @@ function BulkEmailContentHistory({ intl }) {
           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)}

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailHistoryTable.jsx

@@ -1,4 +1,4 @@
-import { Alert, DataTable } from '@edx/paragon';
+import { Alert, DataTable } from '@openedx/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.object),
+  tableData: PropTypes.arrayOf(PropTypes.shape({})),
   tableDescription: PropTypes.string,
   alertWarningMessage: PropTypes.string.isRequired,
   alertErrorMessage: PropTypes.string.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  additionalColumns: PropTypes.arrayOf(PropTypes.object),
+  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  additionalColumns: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 BulkEmailTaskManagerTable.defaultProps = {

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx

@@ -1,34 +1,40 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
-import { Hyperlink, Alert } from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+import { Hyperlink, Alert } from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function BulkEmailPendingTasksAlert() {
+export default function BulkEmailPendingTasksAlert(props) {
+  const { courseId } = props;
+
   return (
-    <>
-      <Alert variant="warning" icon={WarningFilled}>
+    <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}
+      >
         <FormattedMessage
-          id="bulk.email.pending.tasks.description.one"
-          defaultMessage="To view all pending tasks, including email, visit&nbsp;"
+          id="bulk.email.pending.tasks.link"
+          defaultMessage="Course Info"
         />
-        <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>
-    </>
+      </Hyperlink>
+      <FormattedMessage
+        id="bulk.email.pending.tasks.description.two"
+        defaultMessage="&nbsp;in the Instructor Dashboard."
+      />
+    </Alert>
+
   );
 }
+
+BulkEmailPendingTasksAlert.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { Icon, Collapsible } from '@edx/paragon';
-import { SpinnerSimple } from '@edx/paragon/icons';
+import { Icon, Collapsible } from '@openedx/paragon';
+import { SpinnerSimple } from '@openedx/paragon/icons';
 import { getEmailTaskHistory } from './data/api';
 import messages from './messages';
 
@@ -41,6 +41,14 @@ function BulkEmailTaskHistory({ intl }) {
     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)}`,
@@ -89,12 +97,13 @@ function BulkEmailTaskHistory({ intl }) {
         <Collapsible
           styling="card"
           title={intl.formatMessage(messages.emailTaskHistoryTableSectionButton)}
+          // eslint-disable-next-line react/jsx-no-bind
           onOpen={fetchEmailTaskHistoryData}
         >
           {showHistoricalTaskContentTable ? (
             <BulkEmailTaskManagerTable
               errorRetrievingData={errorRetrievingData}
-              tableData={emailTaskHistoryData}
+              tableData={transformDataForTable}
               alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
               alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
               columns={tableColumns}

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
@@ -8,7 +9,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl }) {
+function BulkEmailTaskManager({ intl, courseId }) {
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -26,7 +27,7 @@ function BulkEmailTaskManager({ intl }) {
       </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 />
+        <BulkEmailPendingTasksAlert courseId={courseId} />
       </div>
     </div>
   );
@@ -34,6 +35,7 @@ function BulkEmailTaskManager({ intl }) {
 
 BulkEmailTaskManager.propTypes = {
   intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
 };
 
 export default injectIntl(BulkEmailTaskManager);

src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal } from '@edx/paragon';
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
@@ -12,10 +12,13 @@ function ViewEmailModal({
   const [, dispatch] = useContext(BulkEmailContext);
   return (
     <div>
-      <Modal
-        open={isOpen}
-        title=""
-        body={(
+      <ModalDialog
+        isOpen={isOpen}
+        onClose={() => setModalOpen(false)}
+        hasCloseButton
+      >
+        <ModalDialog.Body>
+
           <div>
             <div className="d-flex flex-row">
               <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -40,24 +43,30 @@ function ViewEmailModal({
               <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
             </div>
           </div>
-        )}
-        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>,
-        ]}
-      />
+        </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>
     </div>
   );
 }

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx

@@ -1,14 +1,16 @@
 /* eslint-disable react/prop-types */
+/* eslint-disable react/no-unstable-nested-components */
+
 import React, {
   useCallback, useContext, useState, useEffect,
 } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert, DataTable, Icon, IconButton, useToggle,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   Delete, Info, Visibility, Edit,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
 import { useParams } from 'react-router-dom';
 import { BulkEmailContext } from '../../bulk-email-context';
 import { deleteScheduledEmailThunk, getScheduledBulkEmailThunk } from './data/thunks';
@@ -24,6 +26,7 @@ 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(', '),
   }));
@@ -46,6 +49,7 @@ function BulkEmailScheduledEmailsTable({ intl }) {
 
   const fetchTableData = useCallback((args) => {
     dispatch(getScheduledBulkEmailThunk(courseId, args.pageIndex + 1));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleViewEmail = (row) => {
@@ -88,10 +92,10 @@ function BulkEmailScheduledEmailsTable({ intl }) {
   const handleEditEmail = (row) => {
     const {
       original: {
-        htmlMessage: emailBody, subject: emailSubject, taskDue, targets, schedulingId, emailId,
+        htmlMessage: emailBody, subject: emailSubject, taskDueUTC, targets, schedulingId, emailId,
       },
     } = row;
-    const dateTime = new Date(taskDue);
+    const dateTime = new Date(taskDueUTC);
     const emailRecipients = targets.replaceAll('-', ':').split(', ');
     const scheduleDate = formatDate(dateTime);
     const scheduleTime = formatTime(dateTime);

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailScheduledEmailsTable';

src/components/bulk-email-tool/bulk-email-task-manager/messages.js

@@ -34,6 +34,10 @@ 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.',

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx

@@ -66,7 +66,8 @@ describe('BulkEmailContentHistory component', () => {
       // verify table contents
       const { emails } = emailHistoryData;
       const email = emails[0];
-      expect(await screen.findByText(email.created)).toBeTruthy();
+      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();
@@ -103,7 +104,8 @@ describe('BulkEmailContentHistory component', () => {
       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();
+      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();

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 of 1.')).toBeTruthy();
+    expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
 
     // verification of table contents
     const { tasks } = pendingInstructorTaskData;

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasksAlert.test.jsx

@@ -0,0 +1,33 @@
+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');
+  });
+});

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailTaskHistory.test.jsx

@@ -51,11 +51,12 @@ describe('BulkEmailTaskHistory 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 of 1.')).toBeTruthy();
+      expect(await screen.findAllByText('Showing 1 - 1 of 1.')).toBeTruthy();
       // verification of row contents
       const { tasks } = taskHistoryData;
       const task = tasks[0];
-      expect(await screen.findByText(task.created)).toBeTruthy();
+      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();

src/components/bulk-email-tool/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailTool';

src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 function TaskAlertModal(props) {
@@ -40,6 +40,7 @@ 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>

src/components/bulk-email-tool/task-alert-modal/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './TaskAlertModal';

src/components/bulk-email-tool/text-editor/TextEditor.jsx

@@ -43,6 +43,8 @@ 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}

src/components/bulk-email-tool/text-editor/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './TextEditor';

src/components/navigation-tabs/BackToInstructor.jsx

@@ -1,16 +1,19 @@
 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 '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
+import { Button, Icon } from '@openedx/paragon';
+import { ArrowBack } from '@openedx/paragon/icons';
+
+export default function BackToInstructor(props) {
+  const { courseId } = props;
 
-export default function BackToInstructor() {
   return (
     <Button
       variant="tertiary"
       className="mb-4.5 ml-n4.5 text-primary-500"
-      href={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+      href={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
     >
       <Icon
         src={ArrowBack}
@@ -24,3 +27,7 @@ export default function BackToInstructor() {
     </Button>
   );
 }
+
+BackToInstructor.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};

src/components/navigation-tabs/BackToInstructor.test.jsx

@@ -0,0 +1,33 @@
+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');
+  });
+});

src/components/navigation-tabs/NavigationTabs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Nav } from '@edx/paragon';
+import { Nav } from '@openedx/paragon';
 
 export default function NavigationTabs(props) {
   const { tabData } = props;

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 Footer from '@edx/frontend-component-footer';
-import { Spinner } from '@edx/paragon';
+import FooterSlot from '@openedx/frontend-slot-footer';
+import { Spinner } from '@openedx/paragon';
 
 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
 
@@ -39,7 +39,7 @@ export default function PageContainer(props) {
       }
 
       const {
-        org, number, title, tabs, originalUserIsStaff,
+        org, number, title, tabs, originalUserIsStaff, courseModes,
       } = metadataResponse;
       const { cohorts } = cohortsResponse;
 
@@ -48,11 +48,13 @@ export default function PageContainer(props) {
         number,
         title,
         originalUserIsStaff,
+        courseModes,
         tabs: [...tabs],
         cohorts: cohorts.map(({ name }) => name),
       });
     }
     fetchCourseMetadata();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (courseMetadata) {
@@ -65,10 +67,12 @@ export default function PageContainer(props) {
             courseNumber={courseMetadata.number}
             courseTitle={courseMetadata.title}
           />
-          <main>
-            {children}
-          </main>
-          <Footer />
+          <div className="pb-3 container">
+            <main id="main-content">
+              {children}
+            </main>
+          </div>
+          <FooterSlot />
         </>
       </CourseMetadataContext.Provider>
     );

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';
 
-const courseHomeBaseUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
+export const getCourseHomeBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata`;
 
 export async function getCourseHomeCourseMetadata(courseId) {
-  const courseHomeMetadataUrl = `${courseHomeBaseUrl}/${courseId}`;
+  const courseHomeMetadataUrl = `${getCourseHomeBaseUrl()}/${courseId}`;
   const { data } = await getAuthenticatedHttpClient().get(courseHomeMetadataUrl);
   return camelCaseObject(data);
 }

src/components/page-container/data/api.test.js

@@ -0,0 +1,24 @@
+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));
+  });
+});

src/i18n/index.js

@@ -0,0 +1 @@
+export default [];

src/i18n/index.jsx

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

src/i18n/messages/ar.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/ca.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/es_419.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/fr.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/he.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/id.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/ko_kr.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pl.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pt_br.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/ru.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/th.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/uk.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/zh_CN.json

@@ -1 +0,0 @@
-{}

src/index.jsx

@@ -2,16 +2,14 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig,
+  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-platform/react';
 import ReactDOM from 'react-dom';
 
-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 { Helmet } from 'react-helmet';
+import { Routes, Route } from 'react-router-dom';
+import messages from './i18n';
 
 import './index.scss';
 import BulkEmailTool from './components/bulk-email-tool';
@@ -20,15 +18,21 @@ import PageContainer from './components/page-container/PageContainer';
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
-      <div className="pb-3 container">
-        <Switch>
-          <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
-            <PageContainer>
-              <BulkEmailTool />
-            </PageContainer>
-          </AuthenticatedPageRoute>
-        </Switch>
-      </div>
+      <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>,
     document.getElementById('root'),
   );
@@ -50,5 +54,5 @@ initialize({
       );
     },
   },
-  messages: [appMessages, headerMessages, footerMessages, paragonMessages],
+  messages,
 });

src/index.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 @import "~@edx/frontend-component-header/dist/index";

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-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: {
+    footer_slot: {
+      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;
+```

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-app-communications` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)

src/setupTest.js

@@ -8,7 +8,12 @@ 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 appMessages from './i18n';
+import messages from './i18n';
+
+jest.mock('@edx/frontend-platform/react/hooks', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
+  useTrackColorSchemeChoice: jest.fn(),
+}));
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -24,6 +29,8 @@ 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
@@ -43,13 +50,18 @@ export function initializeMockApp() {
   const i18nService = configureI18n({
     config: getConfig(),
     loggingService,
-    messages: [appMessages],
+    messages,
   });
 
   const authService = configureAuth(MockAuthService, { config: getConfig(), loggingService });
   return { loggingService, i18nService, authService };
 }
 
+jest.mock('@edx/frontend-platform/react/hooks', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
+  useTrackColorSchemeChoice: jest.fn(),
+}));
+
 function render(ui, options) {
   // eslint-disable-next-line react/prop-types
   function Wrapper({ children }) {

src/utils/useMobileResponsive.js

@@ -37,6 +37,7 @@ export default function useMobileResponsive(breakpoint) {
     window.addEventListener('resize', checkForMobile);
     // return this function here to clean up the event listener
     return () => window.removeEventListener('resize', checkForMobile);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return isMobileWindow;
 }

webpack.dev.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('webpack-dev');
 

webpack.prod.config.js

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