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() { - +