diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx index 8db1377..aeb4aa4 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() {
- +
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 f0bdc31..eb8dc33 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} /> {intl.formatMessage(messages.bulkEmailSubjectLabel)} @@ -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 2bafefc..799adb9 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,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 ( @@ -50,18 +56,24 @@ export default function BulkEmailRecipient(props) { description="A selectable choice from a list of potential email recipients" /> - group === DEFAULT_GROUPS.ALL_LEARNERS)} - className="col col-lg-4 col-sm-6 col-12" - > - - + { + // additional modes + hasCourseModes + && courseModes.map((courseMode) => ( + group === DEFAULT_GROUPS.ALL_LEARNERS)} + className="col col-lg-4 col-sm-6 col-12" + > + + + )) + } { // additional cohorts additionalCohorts @@ -80,18 +92,6 @@ export default function BulkEmailRecipient(props) { )) } - group === DEFAULT_GROUPS.ALL_LEARNERS)} - className="col col-lg-4 col-sm-6 col-12" - > - - } 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; 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 b7a2903..2d0dd1c 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 ( - + ); } @@ -33,7 +39,7 @@ function renderBulkEmailForm() { function renderBulkEmailFormContext(value) { return ( - + ); } @@ -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 ef1c5c0..5a16d9f 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), });