{intl.formatMessage(messages.instructionsProofreading)}
+{intl.formatMessage(messages.TaskAlertModalAlertTypesRecipients, { subject })}
++ {intl.formatMessage(messages.TaskAlertModalAlertTypesInstructionCaption)} + {intl.formatMessage(messages.TaskAlertModalAlertTypesInstructionCaptionMessage)} +
+ )} + + ); +}; + +AlertMessage.defaultProps = { + emailRecipients: [], +}; + +AlertMessage.propTypes = { + emailRecipients: PropTypes.arrayOf(PropTypes.string), + isScheduled: PropTypes.bool.isRequired, + subject: PropTypes.string.isRequired, +}; + +export const EditMessage = ({ + emailRecipients, isScheduled, scheduleDate, scheduleTime, subject, +}) => { + const intl = useIntl(); + return ( + <> ++ {intl.formatMessage(messages.TaskAlertModalAlertTypesEditingDate, { + dateTime: new Date(`${scheduleDate} ${scheduleTime}`).toLocaleString(), + })} +
++ {intl.formatMessage(messages.TaskAlertModalAlertTypesEditingSubject, { + subject, + })} +
+{intl.formatMessage(messages.TaskAlertModalAlertTypesEditingTo)}
+{intl.formatMessage(messages.TaskAlertModalAlertTypesEditingWarning)}
+ {!isScheduled && ( ++ {intl.formatMessage(messages.TaskAlertModalAlertTypesInstructionCaption)} + {intl.formatMessage(messages.TaskAlertModalAlertTypesInstructionCaptionMessage)} +
+ )} + + ); +}; + +EditMessage.defaultProps = { + emailRecipients: [], + scheduleDate: '', + scheduleTime: '', +}; + +EditMessage.propTypes = { + emailRecipients: PropTypes.arrayOf(PropTypes.string), + isScheduled: PropTypes.bool.isRequired, + scheduleDate: PropTypes.string, + scheduleTime: PropTypes.string, + subject: PropTypes.string.isRequired, +}; diff --git a/plugins/communications-app/TaskAlertModalForm/api.js b/plugins/communications-app/TaskAlertModalForm/api.js new file mode 100644 index 00000000..62fb078d --- /dev/null +++ b/plugins/communications-app/TaskAlertModalForm/api.js @@ -0,0 +1,25 @@ +import { getConfig } from '@edx/frontend-platform'; +import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; +import { logError } from '@edx/frontend-platform/logging'; + +export async function postBulkEmailInstructorTask(email, courseId) { + try { + const url = `${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor/api/send_email`; + const response = await getAuthenticatedHttpClient().post(url, email); + return response; + } catch (error) { + logError(error); + throw new Error(error); + } +} + +export async function patchScheduledBulkEmailInstructorTask(emailData, courseId, scheduleId) { + const endpointUrl = `${getConfig().LMS_BASE_URL}/api/instructor_task/v1/schedules/${courseId}/bulk_email/${scheduleId}`; + try { + const response = await getAuthenticatedHttpClient().patch(endpointUrl, emailData); + return response; + } catch (error) { + logError(error); + throw new Error(error); + } +} diff --git a/plugins/communications-app/TaskAlertModalForm/index.jsx b/plugins/communications-app/TaskAlertModalForm/index.jsx new file mode 100644 index 00000000..52ccb031 --- /dev/null +++ b/plugins/communications-app/TaskAlertModalForm/index.jsx @@ -0,0 +1,158 @@ +import React, { useCallback, useContext } from 'react'; +import PropTypes from 'prop-types'; +import TaskAlertModal from '@communications-app/src/components/bulk-email-tool/task-alert-modal'; +import { getScheduledBulkEmailThunk } from '@communications-app/src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/data/thunks'; +import { BulkEmailContext } from '@communications-app/src/components/bulk-email-tool/bulk-email-context'; + +import { postBulkEmailInstructorTask, patchScheduledBulkEmailInstructorTask } from './api'; +import { AlertMessage, EditMessage } from './AlertTypes'; + +const TaskAlertModalForm = ({ + formState, + setFormState, + isTaskAlertOpen, + closeTaskAlert, +}) => { + const [, dispatch] = useContext(BulkEmailContext); + + const { + isScheduled, + emailRecipients = { value: [] }, + scheduleDate = '', + scheduleTime = '', + isEditMode = false, + subject, + courseId = '', + emailId = '', + schedulingId = '', + body, + isScheduleButtonClicked = false, + isFormSubmitted = false, + } = formState ?? {}; + + // eslint-disable-next-line react-hooks/exhaustive-deps + const changeFormStatus = useCallback((status) => setFormState({ ...formState, formStatus: status }), []); + + const handlePostEmailTask = async () => { + const emailRecipientsValue = emailRecipients.value; + const emailSubject = subject.value; + const emailBody = body.value; + + const emailData = new FormData(); + emailData.append('action', 'send'); + emailData.append('send_to', JSON.stringify(emailRecipientsValue)); + emailData.append('subject', emailSubject); + emailData.append('message', emailBody); + + if (isScheduled) { + emailData.append('schedule', new Date(`${scheduleDate} ${scheduleTime}`).toISOString()); + } + + changeFormStatus('pending'); + + try { + await postBulkEmailInstructorTask(emailData, courseId); + const newFormStatus = isScheduled ? 'completeSchedule' : 'complete'; + changeFormStatus(newFormStatus); + setTimeout(() => changeFormStatus('default'), 3000); + } catch { + changeFormStatus('error'); + } + }; + + const handlePatchEmailTask = async () => { + const emailRecipientsValue = emailRecipients.value; + const emailSubject = subject.value; + const emailBody = body.value; + + const emailData = { + email: { + targets: emailRecipientsValue, + subject: emailSubject, + message: emailBody, + id: emailId, + }, + schedule: isScheduled ? new Date(`${scheduleDate} ${scheduleTime}`).toISOString() : null, + }; + + changeFormStatus('pending'); + + try { + await patchScheduledBulkEmailInstructorTask(emailData, courseId, schedulingId); + changeFormStatus('completeSchedule'); + setTimeout(() => changeFormStatus('default'), 3000); + } catch { + changeFormStatus('error'); + } + }; + + const createEmailTask = async () => { + const isScheduleValid = isScheduled ? scheduleDate.length > 0 && scheduleTime.length > 0 : true; + const isFormValid = emailRecipients.value.length > 0 && subject.value.length > 0 + && body.value.length > 0 && isScheduleValid; + + if (isFormValid && isEditMode) { + await handlePatchEmailTask(); + } + + if (isFormValid && !isEditMode) { + await handlePostEmailTask(); + } + + dispatch(getScheduledBulkEmailThunk(courseId, 1)); + }; + + return ( +