feat send team emails

package.json

@@ -55,17 +55,18 @@
     "@openedx-plugins/communications-app-schedule-section": "file:plugins/communications-app/ScheduleSection",
     "@openedx-plugins/communications-app-subject-form": "file:plugins/communications-app/SubjectForm",
     "@openedx-plugins/communications-app-task-alert-modal": "file:plugins/communications-app/TaskAlertModalForm",
+    "@openedx-plugins/communications-app-team-emails": "file:plugins/communications-app/TeamEmails",
     "@openedx-plugins/communications-app-test-component": "file:plugins/communications-app/TestComponent",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
     "core-js": "3.26.1",
+    "humps": "^2.0.1",
     "jquery": "3.6.1",
     "popper.js": "1.16.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-bootstrap-typeahead": "^6.3.2",
-    "uuid": "^9.0.1",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
@@ -74,7 +75,8 @@
     "redux": "4.2.0",
     "regenerator-runtime": "0.13.11",
     "tinymce": "5.10.7",
-    "use-deep-compare-effect": "^1.8.1"
+    "use-deep-compare-effect": "^1.8.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",

plugins/communications-app/RecipientsForm/index.jsx

@@ -22,6 +22,7 @@ const RecipientsForm = ({ cohorts: additionalCohorts, courseId }) => {
     emailRecipients,
     isFormSubmitted,
     emailLearnersList = [],
+    teamsList = [],
   } = formData;
 
   const [selectedGroups, setSelectedGroups] = useState([]);
@@ -61,6 +62,8 @@ const RecipientsForm = ({ cohorts: additionalCohorts, courseId }) => {
     dispatch(formActions.updateForm({ emailLearnersList: setEmailLearnersListUpdated }));
   };
 
+  const isInvalidRecipients = teamsList.length === 0 && selectedGroups.length === 0;
+
   useEffect(() => {
     setSelectedGroups(emailRecipients);
   }, [isEditMode, emailRecipients.length, emailRecipients]);
@@ -176,7 +179,7 @@ const RecipientsForm = ({ cohorts: additionalCohorts, courseId }) => {
           disabled={hasAllLearnersSelected}
         >
           <FormattedMessage
-            id="bulk.email.form.recipients.learners"
+            id="bulk.email.form.recipients.individual_learners"
             defaultMessage="Individual learners"
             description="A selectable choice from a list of potential to add an email list of learners"
           />
@@ -194,7 +197,13 @@ const RecipientsForm = ({ cohorts: additionalCohorts, courseId }) => {
       />
       )}
 
-      { isFormSubmitted && selectedGroups.length === 0 && (
+      <PluggableComponent
+        id="team-emails"
+        as="communications-app-team-emails"
+        courseId={courseId}
+      />
+
+      { isFormSubmitted && isInvalidRecipients && (
         <Form.Control.Feedback
           className="px-3"
           type="invalid"

plugins/communications-app/ScheduleSection/index.jsx

@@ -7,6 +7,7 @@ import {
   Form,
   Icon,
   Toast,
+  Spinner,
 } from '@edx/paragon';
 import {
   SpinnerSimple,
@@ -23,8 +24,14 @@ import { useSelector, useDispatch } from '@communications-app/src/components/bul
 import { actionCreators as formActions } from '@communications-app/src/components/bulk-email-tool/bulk-email-form/BuildEmailFormExtensible/context/reducer';
 
 import messages from './messages';
+import './styles.scss';
 
-const formStatusToast = ['error', 'complete', 'completeSchedule'];
+const ERROR = 'error';
+const COMPLETE = 'complete';
+const COMPLETE_SCHEDULE = 'completeSchedule';
+const LOADING_TEAMS = 'loadingTeams';
+const PENDING = 'pending';
+const formStatusToast = [ERROR, COMPLETE, COMPLETE_SCHEDULE, LOADING_TEAMS];
 
 const ScheduleSection = ({ openTaskAlert }) => {
   const intl = useIntl();
@@ -39,6 +46,7 @@ const ScheduleSection = ({ openTaskAlert }) => {
     isEditMode,
     formStatus,
     isScheduledSubmitted = false,
+    isLoadingTeams = false,
   } = formData;
 
   const formStatusErrors = {
@@ -89,6 +97,7 @@ const ScheduleSection = ({ openTaskAlert }) => {
     complete: <Icon src={Check} />,
     completeSchedule: <Icon src={Check} />,
     error: <Icon src={Cancel} />,
+    isLoadingTeams: <Icon src={Send} />,
   }), []);
 
   const statefulButtonLabels = useMemo(() => ({
@@ -99,13 +108,15 @@ const ScheduleSection = ({ openTaskAlert }) => {
     complete: intl.formatMessage(messages.ScheduleSectionSubmitButtonComplete),
     completeSchedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonCompleteSchedule),
     error: intl.formatMessage(messages.ScheduleSectionSubmitButtonError),
+    loadingTeams: intl.formatMessage(messages.ScheduleSectionSubmitButtonDefault),
   }), [intl]);
 
   const statefulButtonDisableStates = useMemo(() => [
-    'pending',
-    'complete',
-    'completeSchedule',
-  ], []);
+    PENDING,
+    COMPLETE,
+    COMPLETE_SCHEDULE,
+    isLoadingTeams ? LOADING_TEAMS : '',
+  ], [isLoadingTeams]);
 
   return (
     <Form.Group>
@@ -147,16 +158,32 @@ const ScheduleSection = ({ openTaskAlert }) => {
         </Button>
         )}
 
-        <StatefulButton
-          className="send-email-btn"
-          data-testid="send-email-btn"
-          variant="primary"
-          onClick={handleClickStatefulButton}
-          state={formStatus}
-          icons={statefulButtonIcons}
-          labels={statefulButtonLabels}
-          disabledStates={statefulButtonDisableStates}
-        />
+        <div className="d-flex flex-column">
+          <StatefulButton
+            className="send-email-btn"
+            data-testid="send-email-btn"
+            variant="primary"
+            onClick={handleClickStatefulButton}
+            state={isLoadingTeams ? LOADING_TEAMS : formStatus}
+            icons={statefulButtonIcons}
+            labels={statefulButtonLabels}
+            disabledStates={statefulButtonDisableStates}
+          />
+          {isLoadingTeams && (
+          <Form.Control.Feedback
+            className="mt-1"
+            icon={(
+              <Spinner
+                animation="border"
+                className="mie-3 loading-teams-spinner__medium"
+                screenReaderText="loading"
+              />
+            )}
+          >
+            {intl.formatMessage(messages.ScheduleSectionSubmitButtonFeedBackLoadingTeams)}
+          </Form.Control.Feedback>
+          )}
+        </div>
 
         <Toast
           show={formStatusToast.includes(formStatus)}

plugins/communications-app/ScheduleSection/messages.js

@@ -48,6 +48,11 @@ const messages = defineMessages({
     id: 'schedule.section.submit.button.schedule.complete',
     defaultMessage: 'Scheduling Done',
   },
+  ScheduleSectionSubmitButtonFeedBackLoadingTeams: {
+    id: 'schedule.section.submit.button.feedback.loading.teams',
+    defaultMessage: 'Loading teams',
+    description: 'A loading shown to the user while teams are being fetching',
+  },
 });
 
 export default messages;

plugins/communications-app/ScheduleSection/styles.scss

@@ -0,0 +1,8 @@
+$medium-spinner: 15px;
+
+.loading-teams-spinner {
+  &__medium {
+    height: $medium-spinner;
+    width: $medium-spinner;
+  }
+}

plugins/communications-app/TaskAlertModalForm/index.jsx

@@ -31,15 +31,19 @@ const TaskAlertModalForm = ({
     isScheduleButtonClicked = false,
     isFormSubmitted = false,
     emailLearnersList = [],
+    teamsList = [],
+    teamsListFullData = [],
   } = formData;
 
   const changeFormStatus = (status) => dispatchForm(formActions.updateForm({ formStatus: status }));
   const handleResetFormValues = () => dispatchForm(formActions.resetForm());
 
   const handlePostEmailTask = async () => {
-    const emailRecipientsFormat = emailRecipients.filter((recipient) => recipient !== 'individual-learners');
+    const teamsNames = teamsListFullData.map(({ name }) => name);
+    const invalidRecipients = ['individual-learners', ...teamsNames];
+    const emailRecipientsFormat = emailRecipients.filter((recipient) => !invalidRecipients.includes(recipient));
     const emailsLearners = emailLearnersList.map(({ email }) => email);
-    const extraTargets = { emails: emailsLearners };
+    const extraTargets = { emails: emailsLearners, teams: teamsList };
     const emailData = new FormData();
     emailData.append('action', 'send');
     emailData.append('send_to', JSON.stringify(emailRecipientsFormat));
@@ -93,7 +97,8 @@ const TaskAlertModalForm = ({
     const isScheduleValid = isScheduled ? scheduleDate.length > 0 && scheduleTime.length > 0 : true;
     const isIndividualEmailsValid = (emailRecipients.includes('individual-learners') && emailLearnersList.length > 0)
     || !emailRecipients.includes('individual-learners');
-    const isFormValid = emailRecipients.length > 0 && subject.length > 0
+    const isValidRecipients = emailRecipients.length > 0 || teamsList.length > 0;
+    const isFormValid = isValidRecipients && subject.length > 0
     && body.length > 0 && isScheduleValid && isIndividualEmailsValid;
 
     if (isFormValid && isEditMode) {

plugins/communications-app/TeamEmails/FeedbackMessage.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import {
+  Form,
+  Spinner,
+} from '@edx/paragon';
+
+import './FeedbackMessage.scss';
+
+const FeedbackMessage = ({ title }) => (
+  <Form.Control.Feedback
+    className="mt-1"
+    data-testid="feedback-message-container"
+    icon={(
+      <Spinner
+        animation="border"
+        className="mie-3 loading-teams-spinner__medium"
+        screenReaderText="loading"
+        data-testid="feedback-message-spinner"
+      />
+          )}
+  >
+    {title}
+  </Form.Control.Feedback>
+);
+
+FeedbackMessage.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default FeedbackMessage;

plugins/communications-app/TeamEmails/FeedbackMessage.scss

@@ -0,0 +1,8 @@
+$medium-spinner: 15px;
+
+.loading-teams-spinner {
+  &__medium {
+    height: $medium-spinner;
+    width: $medium-spinner;
+  }
+}

plugins/communications-app/TeamEmails/FeedbackMessage.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import FeedbackMessage from './FeedbackMessage';
+
+describe('FeedbackMessage Component', () => {
+  test('renders with the provided title', () => {
+    const title = 'Loading...';
+    render(<FeedbackMessage title={title} />);
+    const feedbackMessageContainer = screen.getByTestId('feedback-message-container');
+    expect(feedbackMessageContainer).toBeInTheDocument();
+    expect(feedbackMessageContainer).toHaveTextContent(title);
+  });
+
+  test('renders the spinner element', () => {
+    render(<FeedbackMessage title="Loading..." />);
+    const spinnerElement = screen.getByTestId('feedback-message-spinner');
+    expect(spinnerElement).toBeInTheDocument();
+  });
+
+  test('renders the spinner with the correct CSS classes', () => {
+    render(<FeedbackMessage title="Loading..." />);
+    const spinnerElement = screen.getByTestId('feedback-message-spinner');
+    expect(spinnerElement).toHaveClass('mie-3 loading-teams-spinner__medium');
+  });
+});