diff --git a/plugins/communications-app/BodyForm/index.jsx b/plugins/communications-app/BodyForm/index.jsx
index 2ca2f073..ace9eb49 100644
--- a/plugins/communications-app/BodyForm/index.jsx
+++ b/plugins/communications-app/BodyForm/index.jsx
@@ -17,7 +17,7 @@ const BodyForm = () => {
dispatch(formActions.updateForm({ body: value }));
};
- const bodyValidation = body.length > 0;
+ const isBodyValid = body.length > 0;
return (
@@ -26,7 +26,7 @@ const BodyForm = () => {
onChange={handleChangeTextEditor}
value={body}
/>
- {isFormSubmitted && !bodyValidation && (
+ {isFormSubmitted && !isBodyValid && (
{intl.formatMessage(messages.bodyFormFieldError)}
diff --git a/plugins/communications-app/BodyForm/messages.js b/plugins/communications-app/BodyForm/messages.js
index fcca334f..eebbea05 100644
--- a/plugins/communications-app/BodyForm/messages.js
+++ b/plugins/communications-app/BodyForm/messages.js
@@ -5,7 +5,7 @@ const messages = defineMessages({
bodyFormFieldLabel: {
id: 'body.form.field.label',
defaultMessage: 'Body',
- description: 'Email Body label. Meant to have colon or equivilant punctuation.',
+ description: 'Email Body label. Meant to have colon or equivalent punctuation.',
},
bodyFormFieldError: {
id: 'body.form.field.error',
diff --git a/plugins/communications-app/InputForm/index.jsx b/plugins/communications-app/InputForm/index.jsx
index d4b91a72..d3ea0052 100644
--- a/plugins/communications-app/InputForm/index.jsx
+++ b/plugins/communications-app/InputForm/index.jsx
@@ -2,7 +2,10 @@ import PropTypes from 'prop-types';
import { Form, Container } from '@edx/paragon';
const InputForm = ({
- isValid, controlId, label, feedbackText,
+ isValid,
+ controlId,
+ label,
+ feedbackText,
}) => {
const feedbackType = isValid ? 'valid' : 'invalid';
return (
diff --git a/plugins/communications-app/RecipientsForm/index.jsx b/plugins/communications-app/RecipientsForm/index.jsx
index 19e3c02c..4644cc94 100644
--- a/plugins/communications-app/RecipientsForm/index.jsx
+++ b/plugins/communications-app/RecipientsForm/index.jsx
@@ -8,9 +8,9 @@ import { actionCreators as formActions } from '@communications-app/src/component
import './styles.scss';
const disableIsHasLearners = ['track', 'cohort'];
+const recipientsFormDescription = 'A selectable choice from a list of potential email recipients';
-const RecipientsForm = (props) => {
- const { cohorts: additionalCohorts } = props;
+const RecipientsForm = ({ cohorts: additionalCohorts }) => {
const formData = useSelector((state) => state.form);
const dispatch = useDispatch();
const { isEditMode, emailRecipients, isFormSubmitted } = formData;
@@ -65,7 +65,7 @@ const RecipientsForm = (props) => {
{
{
{
@@ -118,7 +118,7 @@ const RecipientsForm = (props) => {
{
diff --git a/plugins/communications-app/RecipientsForm/styles.scss b/plugins/communications-app/RecipientsForm/styles.scss
index a8f104d1..29206d35 100644
--- a/plugins/communications-app/RecipientsForm/styles.scss
+++ b/plugins/communications-app/RecipientsForm/styles.scss
@@ -1,8 +1,8 @@
.recipient-groups {
- > div {
- padding-right: 0.5rem;
- input {
- padding: 0.5rem !important;
- }
+ > div {
+ padding-right: 0.5rem;
+ input {
+ padding: 0.5rem !important;
}
- }
\ No newline at end of file
+ }
+}
diff --git a/plugins/communications-app/ScheduleSection/index.jsx b/plugins/communications-app/ScheduleSection/index.jsx
index 0f267aed..05f87883 100644
--- a/plugins/communications-app/ScheduleSection/index.jsx
+++ b/plugins/communications-app/ScheduleSection/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
@@ -73,6 +73,40 @@ const ScheduleSection = ({ openTaskAlert }) => {
dispatch(formActions.updateForm({ formStatus: 'default' }));
};
+ const handleClickStatefulButton = (event) => {
+ event.preventDefault();
+ if (formStatus === 'schedule' && !isScheduledSubmitted) {
+ dispatch(formActions.updateForm({ isScheduleButtonClicked: true }));
+ }
+ openTaskAlert();
+ };
+
+ const statefulButtonIcons = useMemo(() => ({
+ default: ,
+ schedule: ,
+ reschedule: ,
+ pending: ,
+ complete: ,
+ completeSchedule: ,
+ error: ,
+ }), []);
+
+ const statefulButtonLabels = useMemo(() => ({
+ default: intl.formatMessage(messages.ScheduleSectionSubmitButtonDefault),
+ schedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonSchedule),
+ reschedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonReschedule),
+ pending: intl.formatMessage(messages.ScheduleSectionSubmitButtonPending),
+ complete: intl.formatMessage(messages.ScheduleSectionSubmitButtonComplete),
+ completeSchedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonCompleteSchedule),
+ error: intl.formatMessage(messages.ScheduleSectionSubmitButtonError),
+ }), [intl]);
+
+ const statefulButtonDisableStates = useMemo(() => [
+ 'pending',
+ 'complete',
+ 'completeSchedule',
+ ], []);
+
return (
{getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -117,37 +151,11 @@ const ScheduleSection = ({ openTaskAlert }) => {
className="send-email-btn"
data-testid="send-email-btn"
variant="primary"
- onClick={(event) => {
- event.preventDefault();
- if (formStatus === 'schedule' && !isScheduledSubmitted) {
- dispatch(formActions.updateForm({ isScheduleButtonClicked: true }));
- }
- openTaskAlert();
- }}
+ onClick={handleClickStatefulButton}
state={formStatus}
- icons={{
- default: ,
- schedule: ,
- reschedule: ,
- pending: ,
- complete: ,
- completeSchedule: ,
- error: ,
- }}
- labels={{
- default: intl.formatMessage(messages.ScheduleSectionSubmitButtonDefault),
- schedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonSchedule),
- reschedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonReschedule),
- pending: intl.formatMessage(messages.ScheduleSectionSubmitButtonPending),
- complete: intl.formatMessage(messages.ScheduleSectionSubmitButtonComplete),
- completeSchedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonCompleteSchedule),
- error: intl.formatMessage(messages.ScheduleSectionSubmitButtonError),
- }}
- disabledStates={[
- 'pending',
- 'complete',
- 'completeSchedule',
- ]}
+ icons={statefulButtonIcons}
+ labels={statefulButtonLabels}
+ disabledStates={statefulButtonDisableStates}
/>
{
dispatch(formActions.updateForm({ subject: value }));
};
- const subjectValidation = subject.length > 0;
+ const isSubjectValid = subject.length > 0;
return (
@@ -27,7 +27,7 @@ const SubjectForm = () => {
onChange={handleChangeEmailSubject}
value={subject}
/>
- { isFormSubmitted && !subjectValidation && (
+ { isFormSubmitted && !isSubjectValid && (
{intl.formatMessage(messages.bulkEmailFormSubjectError)}
diff --git a/plugins/communications-app/TaskAlertModalForm/index.jsx b/plugins/communications-app/TaskAlertModalForm/index.jsx
index 6dae1ac8..db25edd4 100644
--- a/plugins/communications-app/TaskAlertModalForm/index.jsx
+++ b/plugins/communications-app/TaskAlertModalForm/index.jsx
@@ -33,6 +33,7 @@ const TaskAlertModalForm = ({
} = formData;
const changeFormStatus = (status) => dispatchForm(formActions.updateForm({ formStatus: status }));
+ const handleResetFormValues = () => dispatchForm(formActions.resetForm());
const handlePostEmailTask = async () => {
const emailData = new FormData();
@@ -51,7 +52,7 @@ const TaskAlertModalForm = ({
await postBulkEmailInstructorTask(emailData, courseId);
const newFormStatus = isScheduled ? 'completeSchedule' : 'complete';
changeFormStatus(newFormStatus);
- setTimeout(() => changeFormStatus('default'), 3000);
+ setTimeout(() => handleResetFormValues(), 3000);
} catch {
changeFormStatus('error');
}
@@ -77,7 +78,7 @@ const TaskAlertModalForm = ({
try {
await patchScheduledBulkEmailInstructorTask(emailData, courseId, schedulingId);
changeFormStatus('completeSchedule');
- setTimeout(() => changeFormStatus('default'), 3000);
+ setTimeout(() => handleResetFormValues(), 3000);
} catch {
changeFormStatus('error');
}
@@ -101,6 +102,22 @@ const TaskAlertModalForm = ({
}
};
+ const handleCloseTaskAlert = (event) => {
+ closeTaskAlert();
+
+ if (event.target.name === 'continue') {
+ if (!isFormSubmitted) {
+ dispatchForm(formActions.updateForm({ isFormSubmitted: true }));
+ }
+
+ if (isScheduleButtonClicked) {
+ dispatchForm(formActions.updateForm({ isScheduledSubmitted: true }));
+ }
+
+ createEmailTask();
+ }
+ };
+
return (
)}
- close={(event) => {
- closeTaskAlert();
-
- if (event.target.name === 'continue') {
- if (!isFormSubmitted) {
- dispatchForm(formActions.updateForm({ isFormSubmitted: true }));
- }
-
- if (isScheduleButtonClicked) {
- dispatchForm(formActions.updateForm({ isScheduledSubmitted: true }));
- }
-
- createEmailTask();
- }
- }}
+ close={handleCloseTaskAlert}
/>
);
};
diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx
index e3976d71..5dcd40af 100644
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -40,9 +40,8 @@ export default function BulkEmailTool() {
-
+