From 02d17aea7102297b8baf0ed4c4514568d02c4f70 Mon Sep 17 00:00:00 2001
From: Taras Lytvynenko <69678257+Inferato@users.noreply.github.com>
Date: Fri, 10 Nov 2023 00:24:20 +0200
Subject: [PATCH 1/3] fix: Course mode is used to show the correct bulk email
 options

---
 .../bulk-email-tool/BulkEmailTool.jsx         |  6 +-
 .../bulk-email-form/BulkEmailForm.jsx         | 14 ++++-
 .../BulkEmailRecipient.jsx                    | 56 ++++++++++---------
 .../bulkEmailFormCourseMode.factory.js        | 18 ++++++
 .../test/BulkEmailForm.test.jsx               | 14 +++--
 .../page-container/PageContainer.jsx          |  3 +-
 6 files changed, 79 insertions(+), 32 deletions(-)
 create mode 100644 src/components/bulk-email-tool/bulk-email-form/data/__factories__/bulkEmailFormCourseMode.factory.js

diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx
index 8db13776..aeb4aa4f 100644
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -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} />
diff --git a/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
index f0bdc316..eb8dc33e 100644
--- a/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
+++ b/src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx
@@ -47,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({
@@ -272,6 +277,7 @@ 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>
@@ -384,6 +390,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);
diff --git 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
index 2bafefc9..4241a0bc 100644
--- 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
@@ -14,7 +14,12 @@ const DEFAULT_GROUPS = {
 };
 
 export default function BulkEmailRecipient(props) {
-  const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
+  const {
+    handleCheckboxes,
+    selectedGroups,
+    additionalCohorts,
+    courseModes,
+  } = props;
   return (
     <Form.Group>
       <Form.Label>
@@ -50,18 +55,25 @@ 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
+          courseModes
+          && courseModes.length > 1
+          && 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,
 };
diff --git 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
new file mode 100644
index 00000000..6564dd1d
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-form/data/__factories__/bulkEmailFormCourseMode.factory.js
@@ -0,0 +1,18 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+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;
diff --git 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
index b7a29039..2d0dd1c3 100644
--- 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,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();
diff --git a/src/components/page-container/PageContainer.jsx b/src/components/page-container/PageContainer.jsx
index 27ff93be..57c0c643 100644
--- a/src/components/page-container/PageContainer.jsx
+++ b/src/components/page-container/PageContainer.jsx
@@ -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,6 +48,7 @@ export default function PageContainer(props) {
         number,
         title,
         originalUserIsStaff,
+        courseModes,
         tabs: [...tabs],
         cohorts: cohorts.map(({ name }) => name),
       });

From 59a02eb22c2008c7a5181998bd4126ea69c3aff4 Mon Sep 17 00:00:00 2001
From: Taras Lytvynenko <69678257+Inferato@users.noreply.github.com>
Date: Thu, 16 Nov 2023 12:04:04 +0200
Subject: [PATCH 2/3] fix: Logical operations moved into a separate variable

---
 .../bulk-email-recipient/BulkEmailRecipient.jsx          | 4 ++--
 .../__factories__/bulkEmailFormCourseMode.factory.js     | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git 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
index 4241a0bc..e6dae7bf 100644
--- 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
@@ -20,6 +20,7 @@ export default function BulkEmailRecipient(props) {
     additionalCohorts,
     courseModes,
   } = props;
+  const isCourseModes = courseModes && courseModes.length > 1;
   return (
     <Form.Group>
       <Form.Label>
@@ -57,8 +58,7 @@ export default function BulkEmailRecipient(props) {
         </Form.Checkbox>
         {
           // additional modes
-          courseModes
-          && courseModes.length > 1
+          isCourseModes
           && courseModes.map((courseMode) => (
             <Form.Checkbox
               key={`track:${courseMode.slug}`}
diff --git 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
index 6564dd1d..14874fa6 100644
--- 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,5 +1,14 @@
+/**
+ * Creates a factory function for generating course modes.
+ *
+ * @returns {Object[]} An array of course mode objects generated by different factories.
+ */
 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')

From ea5d6a2ca19f247a2411b092fa0cd4fd48948b75 Mon Sep 17 00:00:00 2001
From: Taras Lytvynenko <69678257+Inferato@users.noreply.github.com>
Date: Thu, 16 Nov 2023 16:48:10 +0200
Subject: [PATCH 3/3] docs: Unnecessary comment deleted

---
 .../data/__factories__/bulkEmailFormCourseMode.factory.js    | 5 -----
 1 file changed, 5 deletions(-)

diff --git 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
index 14874fa6..c2fae950 100644
--- 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,8 +1,3 @@
-/**
- * Creates a factory function for generating course modes.
- *
- * @returns {Object[]} An array of course mode objects generated by different factories.
- */
 import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
 
 /**