feat: add group selection to invite members modal

src/components/PeopleManagement/CreateGroupModal.jsx

@@ -8,8 +8,8 @@ import {
   ActionRow, Button, FullscreenModal, StatefulButton, useToggle,
 } from '@openedx/paragon';
 import LmsApiService from '../../data/services/LmsApiService';
-import InviteModalContent from '../learner-credit-management/invite-modal/InviteModalContent';
 import SystemErrorAlertModal from '../learner-credit-management/cards/assignment-allocation-status-modals/SystemErrorAlertModal';
+import CreateGroupModalContent from './CreateGroupModalContent';
 
 const CreateGroupModal = ({
   isModalOpen,
@@ -103,7 +103,7 @@ const CreateGroupModal = ({
           </ActionRow>
         )}
       >
-        <InviteModalContent
+        <CreateGroupModalContent
           onSetGroupName={setGroupName}
           onEmailAddressesChange={handleEmailAddressesChange}
           isGroupInvite

src/components/PeopleManagement/CreateGroupModalContent.jsx

@@ -0,0 +1,129 @@
+import React, {
+  useCallback, useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import {
+  Col, Container, Form, Row,
+} from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import InviteModalSummary from '../learner-credit-management/invite-modal/InviteModalSummary';
+import InviteSummaryCount from '../learner-credit-management/invite-modal/InviteSummaryCount';
+import FileUpload from '../learner-credit-management/invite-modal/FileUpload';
+import { EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY, isInviteEmailAddressesInputValueValid } from '../learner-credit-management/cards/data';
+import { MAX_LENGTH_GROUP_NAME } from './constants';
+
+const CreateGroupModalContent = ({
+  onEmailAddressesChange,
+  onSetGroupName,
+  isGroupInvite,
+}) => {
+  const [learnerEmails, setLearnerEmails] = useState([]);
+  const [emailAddressesInputValue, setEmailAddressesInputValue] = useState('');
+  const [memberInviteMetadata, setMemberInviteMetadata] = useState({
+    isValidInput: null,
+    lowerCasedEmails: [],
+    duplicateEmails: [],
+  });
+  const [groupNameLength, setGroupNameLength] = useState(0);
+  const [groupName, setGroupName] = useState('');
+
+  const handleGroupNameChange = useCallback((e) => {
+    if (!e.target.value) {
+      setGroupName('');
+      onSetGroupName('');
+      return;
+    }
+    if (e.target.value.length > MAX_LENGTH_GROUP_NAME) {
+      return;
+    }
+    setGroupName(e.target.value);
+    setGroupNameLength(e.target.value.length);
+    onSetGroupName(e.target.value);
+  }, [onSetGroupName]);
+
+  const handleEmailAddressesChanged = useCallback((value) => {
+    if (!value) {
+      setLearnerEmails([]);
+      onEmailAddressesChange([]);
+      return;
+    }
+    const emails = value.split('\n').map((email) => email.trim()).filter((email) => email.length > 0);
+    setLearnerEmails(emails);
+  }, [onEmailAddressesChange]);
+
+  const debouncedHandleEmailAddressesChanged = useMemo(
+    () => debounce(handleEmailAddressesChanged, EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY),
+    [handleEmailAddressesChanged],
+  );
+
+  useEffect(() => {
+    debouncedHandleEmailAddressesChanged(emailAddressesInputValue);
+  }, [emailAddressesInputValue, debouncedHandleEmailAddressesChanged]);
+
+  // Validate the learner emails emails from user input whenever it changes
+  useEffect(() => {
+    const inviteMetadata = isInviteEmailAddressesInputValueValid({
+      learnerEmails,
+    });
+    setMemberInviteMetadata(inviteMetadata);
+    if (inviteMetadata.canInvite) {
+      onEmailAddressesChange(learnerEmails, { canInvite: true });
+    } else {
+      onEmailAddressesChange([]);
+    }
+  }, [onEmailAddressesChange, learnerEmails]);
+
+  return (
+    <Container size="lg" className="py-3">
+      <h3>
+        <FormattedMessage
+          id="people-management.page.create-group.section.header"
+          defaultMessage="Create a custom group of members"
+          description="Header for the section to create a new group."
+        />
+      </h3>
+      <Row>
+        <Col>
+          <h4 className="mt-4">Name your group</h4>
+          <Form.Control
+            value={groupName}
+            onChange={handleGroupNameChange}
+            label="name-your-group"
+            data-testid="group-name"
+            placeholder="Name"
+          />
+          <Form.Control.Feedback className="mb-4">
+            {groupNameLength} / {MAX_LENGTH_GROUP_NAME}
+          </Form.Control.Feedback>
+        </Col>
+        <Col />
+      </Row>
+      <Row>
+        <Col>
+          <h4>Select group members</h4>
+          <p>Upload a CSV or select members from the table below.</p>
+          <FileUpload
+            memberInviteMetadata={memberInviteMetadata}
+            setEmailAddressesInputValue={setEmailAddressesInputValue}
+          />
+        </Col>
+        <Col>
+          <h4>Details</h4>
+          <InviteModalSummary isGroupInvite={isGroupInvite} memberInviteMetadata={memberInviteMetadata} />
+          <InviteSummaryCount memberInviteMetadata={memberInviteMetadata} />
+          <hr className="my-4" />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+CreateGroupModalContent.propTypes = {
+  onEmailAddressesChange: PropTypes.func.isRequired,
+  onSetGroupName: PropTypes.func,
+  isGroupInvite: PropTypes.bool,
+};
+
+export default CreateGroupModalContent;

src/components/PeopleManagement/tests/CreateGroupModal.test.jsx

@@ -32,6 +32,7 @@ const initialStoreState = {
     enterpriseFeatures: {
       topDownAssignmentRealTimeLcm: true,
       enterpriseGroupsV1: true,
+      enterpriseGroupsV2: true,
     },
   },
 };
@@ -57,7 +58,7 @@ const CreateGroupModalWrapper = ({
   );
 };
 
-describe('<InviteMemberModal />', () => {
+describe('<CreateGroupModal />', () => {
   it('Modal renders as expected', async () => {
     render(<CreateGroupModalWrapper />);
     expect(screen.getByText('Create a custom group of members')).toBeInTheDocument();

src/components/learner-credit-management/assignment-modal/AssignmentModalFlexGroup.jsx → src/components/learner-credit-management/FlexGroupDropdown.jsx

@@ -5,7 +5,7 @@ import {
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
-const AssignmentModalFlexGroup = ({
+const FlexGroupDropdown = ({
   enterpriseFlexGroups,
   onCheckedGroupsChanged,
   checkedGroups,
@@ -50,7 +50,7 @@ const AssignmentModalFlexGroup = ({
   );
 };
 
-AssignmentModalFlexGroup.propTypes = {
+FlexGroupDropdown.propTypes = {
   checkedGroups: PropTypes.shape({
     id: PropTypes.string,
     memberEmails: PropTypes.arrayOf(PropTypes.string),
@@ -71,4 +71,4 @@ AssignmentModalFlexGroup.propTypes = {
   ]),
 };
 
-export default AssignmentModalFlexGroup;
+export default FlexGroupDropdown;

src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx

@@ -11,13 +11,17 @@ import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import { connect } from 'react-redux';
 import BaseCourseCard from '../cards/BaseCourseCard';
-import { formatPrice, useBudgetId, useSubsidyAccessPolicy } from '../data';
+import {
+  formatPrice,
+  useBudgetId,
+  useSubsidyAccessPolicy,
+  useGroupDropdownToggle,
+} from '../data';
 import AssignmentModalSummary from './AssignmentModalSummary';
 import { EMAIL_ADDRESSES_INPUT_VALUE_DEBOUNCE_DELAY, isAssignEmailAddressesInputValueValid } from '../cards/data';
 import AssignmentAllocationHelpCollapsibles from './AssignmentAllocationHelpCollapsibles';
 import EVENT_NAMES from '../../../eventTracking';
-import AssignmentModalFlexGroup from './AssignmentModalFlexGroup';
-import useGroupDropdownToggle from '../data/hooks/useGroupDropdownToggle';
+import FlexGroupDropdown from '../FlexGroupDropdown';
 import { GROUP_DROPDOWN_TEXT } from '../../PeopleManagement/constants';
 
 const AssignmentModalContent = ({
@@ -146,7 +150,7 @@ const AssignmentModalContent = ({
               />
             </h4>
             {shouldShowGroupsDropdown && (
-              <AssignmentModalFlexGroup
+              <FlexGroupDropdown
                 checkedGroups={checkedGroups}
                 dropdownRef={dropdownRef}
                 dropdownToggleLabel={dropdownToggleLabel}

src/components/learner-credit-management/data/hooks/index.js

@@ -22,3 +22,4 @@ export { default as useAllEnterpriseGroups } from './useAllEnterpriseGroups';
 export { default as useContentMetadata } from './useContentMetadata';
 export { default as useEnterpriseRemovedGroupMembers } from './useEnterpriseRemovedGroupMembers';
 export { default as useEnterpriseFlexGroups } from './useEnterpriseFlexGroups';
+export { default as useGroupDropdownToggle } from './useGroupDropdownToggle';

src/components/learner-credit-management/invite-modal/InviteMembersModalWrapper.jsx

@@ -4,8 +4,9 @@ import {
   ActionRow, Button, FullscreenModal, Hyperlink, StatefulButton, useToggle,
 } from '@openedx/paragon';
 import { snakeCaseObject } from '@edx/frontend-platform/utils';
+import { connect } from 'react-redux';
 
-import { useBudgetId, useSubsidyAccessPolicy } from '../data';
+import { useBudgetId, useSubsidyAccessPolicy, useEnterpriseFlexGroups } from '../data';
 import InviteModalContent from './InviteModalContent';
 import SystemErrorAlertModal from '../cards/assignment-allocation-status-modals/SystemErrorAlertModal';
 import LmsApiService from '../../../data/services/LmsApiService';
@@ -19,16 +20,21 @@ const InviteMembersModalWrapper = ({
   handleTabSelect,
   setRefresh,
   refresh,
+  enterpriseId,
+  enterpriseFeatures,
 }) => {
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
   const [learnerEmails, setLearnerEmails] = useState([]);
   const [canInviteMembers, setCanInviteMembers] = useState(false);
   const [inviteButtonState, setInviteButtonState] = useState('default');
+  const [groupLearnerEmails, setGroupLearnerEmails] = useState([]);
+  const { data: enterpriseFlexGroups } = useEnterpriseFlexGroups(enterpriseId);
   const [isSystemErrorModalOpen, openSystemErrorModal, closeSystemErrorModal] = useToggle(false);
   const {
     successfulInvitationToast: { displayToastForInvitation },
   } = useContext(BudgetDetailPageContext);
+  const shouldShowGroupsDropdown = enterpriseFeatures.enterpriseGroupsV2 && enterpriseFlexGroups?.length > 0;
 
   const handleCloseInviteModal = () => {
     close();
@@ -46,10 +52,18 @@ const InviteMembersModalWrapper = ({
     setCanInviteMembers(canInvite);
   }, []);
 
+  const handleGroupSelectionsChanged = useCallback((
+    value,
+    { canInvite = false } = {},
+  ) => {
+    setGroupLearnerEmails(value);
+    setCanInviteMembers(canInvite);
+  }, []);
+
   const handleInviteMembers = async () => {
     setInviteButtonState('pending');
     const requestBody = snakeCaseObject({
-      learnerEmails,
+      learnerEmails: [...learnerEmails, ...groupLearnerEmails],
       catalogUuid: subsidyAccessPolicy.catalogUuid,
       actByDate: subsidyAccessPolicy.subsidyExpirationDatetime,
     });
@@ -116,6 +130,9 @@ const InviteMembersModalWrapper = ({
           onEmailAddressesChange={handleEmailAddressesChanged}
           subsidyAccessPolicy={subsidyAccessPolicy}
           isGroupInvite={false}
+          onGroupSelectionsChanged={handleGroupSelectionsChanged}
+          enterpriseFlexGroups={enterpriseFlexGroups}
+          shouldShowGroupsDropdown={shouldShowGroupsDropdown}
         />
       </FullscreenModal>
       <SystemErrorAlertModal
@@ -134,6 +151,15 @@ InviteMembersModalWrapper.propTypes = {
   handleTabSelect: PropTypes.func.isRequired,
   setRefresh: PropTypes.func.isRequired,
   refresh: PropTypes.bool.isRequired,
+  enterpriseId: PropTypes.string.isRequired,
+  enterpriseFeatures: PropTypes.shape({
+    enterpriseGroupsV2: PropTypes.bool.isRequired,
+  }),
 };
 
-export default InviteMembersModalWrapper;
+const mapStateToProps = state => ({
+  enterpriseId: state.portalConfiguration.enterpriseId,
+  enterpriseFeatures: state.portalConfiguration.enterpriseFeatures,
+});
+
+export default connect(mapStateToProps)(InviteMembersModalWrapper);