@@ -43,7 +52,7 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
id="advance.analytics.data.refresh.msg"
defaultMessage="Data updated on {date}"
description="Data refresh message"
- values={{ date: data?.lastUpdatedAt || currentDate }}
+ values={{ date: formatDate(data?.lastUpdatedAt || currentDate) }}
/>
@@ -205,8 +214,8 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
})}
>
{
})}
>
{
})}
>
{
})}
>
@@ -267,8 +276,8 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
})}
>
diff --git a/src/components/AdvanceAnalyticsV2/Stats.jsx b/src/components/AdvanceAnalyticsV2/Stats.jsx
index a30b55bf7d..d9b392668e 100644
--- a/src/components/AdvanceAnalyticsV2/Stats.jsx
+++ b/src/components/AdvanceAnalyticsV2/Stats.jsx
@@ -9,7 +9,10 @@ import classNames from 'classnames';
const Stats = ({
isFetching, isError, data,
}) => {
- const formatter = Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
+ const formatNumber = (number) => (number >= 10000
+ ? new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(number)
+ : String(number));
+
if (isError) {
return (
- {formatter.format(data?.enrolls || 0)}
+ {formatNumber(data?.enrolls || 0)}
@@ -45,7 +48,7 @@ const Stats = ({
description="Title for the distinct courses stat."
/>
-
{formatter.format(data?.courses || 0)}
+
{formatNumber(data?.courses || 0)}
@@ -55,7 +58,7 @@ const Stats = ({
description="Title for the daily sessions stat."
/>
-
{formatter.format(data?.sessions || 0)}
+
{formatNumber(data?.sessions || 0)}
@@ -65,7 +68,7 @@ const Stats = ({
description="Title for the learning hours stat."
/>
-
{formatter.format(data?.hours || 0)}
+
{formatNumber(data?.hours || 0)}
@@ -75,7 +78,7 @@ const Stats = ({
description="Title for the completions stat."
/>
-
{formatter.format(data?.completions || 0)}
+
{formatNumber(data?.completions || 0)}
diff --git a/src/components/AdvanceAnalyticsV2/WarningBanner.jsx b/src/components/AdvanceAnalyticsV2/WarningBanner.jsx
new file mode 100644
index 0000000000..84bf53320e
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/WarningBanner.jsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import Cookies from 'universal-cookie';
+import {
+ PageBanner,
+} from '@openedx/paragon';
+import { ANALYTICS_WARNING_BANNER_COOKIE } from './data/constants';
+
+const WarningBanner = () => {
+ const [showBanner, setShowBanner] = useState(true);
+ const cookies = new Cookies();
+
+ const onDismiss = () => {
+ setShowBanner(false);
+ cookies.set(ANALYTICS_WARNING_BANNER_COOKIE, true, { sameSite: 'strict' });
+ };
+ return (
+
+ 🚀 Analytics Just Got Better! We've updated charts, improved performance,
+ and now include audit enrollments for a more complete view of your data.
+
+ );
+};
+
+export default WarningBanner;
diff --git a/src/components/AdvanceAnalyticsV2/charts/BarChart.jsx b/src/components/AdvanceAnalyticsV2/charts/BarChart.jsx
index d9bf6d1731..e620b56d25 100644
--- a/src/components/AdvanceAnalyticsV2/charts/BarChart.jsx
+++ b/src/components/AdvanceAnalyticsV2/charts/BarChart.jsx
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
const BarChart = ({
data, xKey, yKey, colorKey, colorMap, hovertemplate, xAxisTitle, yAxisTitle,
}) => {
- const categories = Object.keys(colorMap);
+ const categories = Object.keys(colorMap).sort();
const traces = useMemo(() => categories.map(category => {
const filteredData = data.filter(item => item[colorKey] === category);
diff --git a/src/components/AdvanceAnalyticsV2/charts/LineChart.jsx b/src/components/AdvanceAnalyticsV2/charts/LineChart.jsx
index be4dd17bd9..0e893865c3 100644
--- a/src/components/AdvanceAnalyticsV2/charts/LineChart.jsx
+++ b/src/components/AdvanceAnalyticsV2/charts/LineChart.jsx
@@ -41,7 +41,6 @@ const LineChart = ({
},
xaxis: { title: xAxisTitle },
yaxis: { title: yAxisTitle },
- dragmode: false,
autosize: true,
};
diff --git a/src/components/AdvanceAnalyticsV2/data/constants.js b/src/components/AdvanceAnalyticsV2/data/constants.js
index bb0a88a39a..74cf32ded1 100644
--- a/src/components/AdvanceAnalyticsV2/data/constants.js
+++ b/src/components/AdvanceAnalyticsV2/data/constants.js
@@ -114,3 +114,5 @@ export const CALCULATION = {
MOVING_AVERAGE_3_PERIODS: 'moving-average-3-period',
MOVING_AVERAGE_7_PERIODS: 'moving-average-7-period',
};
+
+export const ANALYTICS_WARNING_BANNER_COOKIE = 'hide-warning-banner-on-analytics';
diff --git a/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx b/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
index 2935d134fd..68adf1b46d 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/AnalyticsTable.jsx
@@ -62,12 +62,13 @@ const AnalyticsTable = ({
title={tableTitle}
subtitle={tableSubtitle}
DownloadCSVComponent={(
-
+
)}
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx b/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
index 9b470ce77b..9e5d35d54f 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Completions.jsx
@@ -138,7 +138,7 @@ const Completions = ({
chartType="BarChart"
chartProps={{
data: data?.topCoursesByCompletions,
- xKey: 'courseTitle',
+ xKey: 'courseKey',
yKey: 'completionCount',
colorKey: 'enrollType',
colorMap: chartColorMap,
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx b/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
index 5f5396ffa0..5bf4085d20 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Engagements.jsx
@@ -137,7 +137,7 @@ const Engagements = ({
chartType="BarChart"
chartProps={{
data: data?.topCoursesByEngagement,
- xKey: 'courseTitle',
+ xKey: 'courseKey',
yKey: 'learningTimeHours',
colorKey: 'enrollType',
colorMap: chartColorMap,
diff --git a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
index 5d7940d2e1..357d083d2e 100644
--- a/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
+++ b/src/components/AdvanceAnalyticsV2/tabs/Enrollments.jsx
@@ -138,7 +138,7 @@ const Enrollments = ({
chartType="BarChart"
chartProps={{
data: data?.topCoursesByEnrollments,
- xKey: 'courseTitle',
+ xKey: 'courseKey',
yKey: 'enrollmentCount',
colorKey: 'enrollType',
colorMap: chartColorMap,
diff --git a/src/components/AdvanceAnalyticsV2/tests/Stats.test.jsx b/src/components/AdvanceAnalyticsV2/tests/Stats.test.jsx
index 4c3b8fc03f..664fd2bb9c 100644
--- a/src/components/AdvanceAnalyticsV2/tests/Stats.test.jsx
+++ b/src/components/AdvanceAnalyticsV2/tests/Stats.test.jsx
@@ -23,7 +23,7 @@ describe('Stats', () => {
expect(wrapper.find('.title-distinct-courses').text()).toEqual('Distinct Courses');
expect(wrapper.find('.value-distinct-courses').text()).toEqual('365');
expect(wrapper.find('.title-daily-sessions').text()).toEqual('Daily Sessions');
- expect(wrapper.find('.value-daily-sessions').text()).toEqual('1.89K');
+ expect(wrapper.find('.value-daily-sessions').text()).toEqual('1892');
expect(wrapper.find('.title-learning-hours').text()).toEqual('Learning Hours');
expect(wrapper.find('.value-learning-hours').text()).toEqual('25.35M');
expect(wrapper.find('.title-completions').text()).toEqual('Completions');
diff --git a/src/components/AdvanceAnalyticsV2/tests/WarningBanner.test.jsx b/src/components/AdvanceAnalyticsV2/tests/WarningBanner.test.jsx
new file mode 100644
index 0000000000..38ce814657
--- /dev/null
+++ b/src/components/AdvanceAnalyticsV2/tests/WarningBanner.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Cookies from 'universal-cookie';
+import WarningBanner from '../WarningBanner';
+import '@testing-library/jest-dom';
+
+// jest.mock('universal-cookie');
+jest.mock('universal-cookie', () => jest.fn().mockImplementation(() => ({
+ set: jest.fn(),
+})));
+
+describe('WarningBanner', () => {
+ let cookies;
+
+ beforeEach(() => {
+ cookies = new Cookies();
+ cookies.set = jest.fn();
+ });
+
+ test('should trigger onDismiss and set cookie in warning banner', () => {
+ render();
+
+ // Check that the banner is initially shown
+ expect(screen.getByText(/Analytics Just Got Better!/i)).toBeInTheDocument();
+
+ // Trigger the onDismiss function
+ fireEvent.click(screen.getByRole('button', { name: /Dismiss/i }));
+
+ // Check that the banner is no longer shown
+ expect(screen.queryByText(/Analytics Just Got Better!/i)).not.toBeInTheDocument();
+ });
+});
diff --git a/src/components/EnterpriseApp/EnterpriseAppRoutes.jsx b/src/components/EnterpriseApp/EnterpriseAppRoutes.jsx
index 9a0d081254..02ac0d708a 100644
--- a/src/components/EnterpriseApp/EnterpriseAppRoutes.jsx
+++ b/src/components/EnterpriseApp/EnterpriseAppRoutes.jsx
@@ -11,7 +11,6 @@ import NotFoundPage from '../NotFoundPage';
import LoadingMessage from '../LoadingMessage';
import SettingsPage from '../settings';
import { SubscriptionManagementPage } from '../subscriptions';
-import { PlotlyAnalyticsPage } from '../PlotlyAnalytics';
import AnalyticsV2Page from '../AdvanceAnalyticsV2/AnalyticsV2Page';
import FeatureNotSupportedPage from '../FeatureNotSupportedPage';
import { ROUTE_NAMES } from './data/constants';
@@ -86,14 +85,6 @@ const EnterpriseAppRoutes = ({
: }
- />
- )}
-
- {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analyticsv2 && (
-
: }
diff --git a/src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx b/src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx
index d706470f45..fd44f0fb5c 100644
--- a/src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx
+++ b/src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx
@@ -12,11 +12,8 @@ jest.mock('../AdvanceAnalyticsV2/AnalyticsV2Page', () => function AnalyticsV2Pag
jest.mock('../../containers/AdminPage', () => function AdminPageMock() {
return AdminPage Mock Component
;
});
-jest.mock('../PlotlyAnalytics', () => ({
- PlotlyAnalyticsPage: () => PlotlyAnalyticsPage Mock Component
,
-}));
-let mockEnterpriseAppPage = 'analyticsv2';
+let mockEnterpriseAppPage = 'analytics';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
@@ -67,11 +64,4 @@ describe('EnterpriseAppRoutes', () => {
renderWithProviders(defaultProps);
expect(screen.getByText('AdminPage Mock Component')).toBeInTheDocument();
});
-
- it('renders Analytics when ANALYTICS_SUPPORTED is true', () => {
- mockEnterpriseAppPage = 'analytics';
- features.ANALYTICS_SUPPORTED = true;
- renderWithProviders(defaultProps);
- expect(screen.getByText('PlotlyAnalyticsPage Mock Component')).toBeInTheDocument();
- });
});
diff --git a/src/components/EnterpriseApp/data/constants.js b/src/components/EnterpriseApp/data/constants.js
index 93bd9412d1..1a809ec2d8 100644
--- a/src/components/EnterpriseApp/data/constants.js
+++ b/src/components/EnterpriseApp/data/constants.js
@@ -2,7 +2,6 @@
export const ROUTE_NAMES = {
analytics: 'analytics',
- analyticsv2: 'analyticsv2',
appearance: 'appearance',
bulkEnrollment: 'enrollment',
bulkEnrollmentResults: 'bulk-enrollment-results',
diff --git a/src/components/PeopleManagement/CreateGroupModal.jsx b/src/components/PeopleManagement/CreateGroupModal.jsx
index e5c03f510f..ecf7e9aae3 100644
--- a/src/components/PeopleManagement/CreateGroupModal.jsx
+++ b/src/components/PeopleManagement/CreateGroupModal.jsx
@@ -2,14 +2,16 @@ import React, { useCallback, useState, useEffect } from 'react';
import { logError } from '@edx/frontend-platform/logging';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
+import { useQueryClient } from '@tanstack/react-query';
import { useIntl } from '@edx/frontend-platform/i18n';
import { snakeCaseObject } from '@edx/frontend-platform/utils';
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';
+import { learnerCreditManagementQueryKeys } from '../learner-credit-management/data';
const CreateGroupModal = ({
isModalOpen,
@@ -27,6 +29,7 @@ const CreateGroupModal = ({
closeModal();
setCreateButtonState('default');
};
+ const queryClient = useQueryClient();
const handleCreateGroup = async () => {
setCreateButtonState('pending');
@@ -49,6 +52,9 @@ const CreateGroupModal = ({
learnerEmails,
});
await LmsApiService.inviteEnterpriseLearnersToGroup(groupCreationResponse.data.uuid, requestBody);
+ queryClient.invalidateQueries({
+ queryKey: learnerCreditManagementQueryKeys.group(enterpriseUUID),
+ });
setCreateButtonState('complete');
handleCloseCreateGroupModal();
} catch (err) {
@@ -103,10 +109,11 @@ const CreateGroupModal = ({
)}
>
-
{
+ const [learnerEmails, setLearnerEmails] = useState([]);
+ const [emailAddressesInputValue, setEmailAddressesInputValue] = useState('');
+ const [memberInviteMetadata, setMemberInviteMetadata] = useState({
+ isValidInput: null,
+ lowerCasedEmails: [],
+ duplicateEmails: [],
+ emailsNotInOrg: [],
+ });
+ const [groupNameLength, setGroupNameLength] = useState(0);
+ const [groupName, setGroupName] = useState('');
+ const { allEnterpriseLearners } = useEnterpriseLearners({ enterpriseUUID });
+
+ 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 handleAddMembersBulkAction = useCallback((value) => {
+ if (!value) {
+ setLearnerEmails([]);
+ onEmailAddressesChange([]);
+ return;
+ }
+ setLearnerEmails(prev => [...prev, ...value]);
+ }, [onEmailAddressesChange]);
+
+ const handleRemoveMembersBulkAction = useCallback((value) => {
+ if (!value) {
+ setLearnerEmails([]);
+ onEmailAddressesChange([]);
+ return;
+ }
+ setLearnerEmails(prev => prev.filter((el) => !value.includes(el)));
+ }, [onEmailAddressesChange]);
+
+ const handleEmailAddressesChanged = useCallback((value) => {
+ if (!value) {
+ setLearnerEmails([]);
+ onEmailAddressesChange([]);
+ return;
+ }
+ // handles csv upload value and formats emails into an array of strings
+ 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,
+ allEnterpriseLearners,
+ });
+ setMemberInviteMetadata(inviteMetadata);
+ if (inviteMetadata.canInvite) {
+ onEmailAddressesChange(learnerEmails, { canInvite: true });
+ } else {
+ onEmailAddressesChange([]);
+ }
+ }, [onEmailAddressesChange, learnerEmails, allEnterpriseLearners]);
+
+ return (
+
+
+
+
+
+
+ Name your group
+
+
+ {groupNameLength} / {MAX_LENGTH_GROUP_NAME}
+
+
+
+
+
+
+ Select group members
+
+
+
+
+
+
+ Details
+
+
+
+
+
+
+
+ );
+};
+
+CreateGroupModalContent.propTypes = {
+ onEmailAddressesChange: PropTypes.func.isRequired,
+ onSetGroupName: PropTypes.func,
+ isGroupInvite: PropTypes.bool,
+ enterpriseUUID: PropTypes.string.isRequired,
+};
+
+export default CreateGroupModalContent;
diff --git a/src/components/PeopleManagement/GroupCardGrid.jsx b/src/components/PeopleManagement/GroupCardGrid.jsx
index fd65adf21a..8c1cde76e0 100644
--- a/src/components/PeopleManagement/GroupCardGrid.jsx
+++ b/src/components/PeopleManagement/GroupCardGrid.jsx
@@ -33,6 +33,7 @@ const GroupCardGrid = ({ groups }) => {
(
+
+
+
+
+
+
+
Some people can't be added.
+
Check that all people in the file are registered with your organization.
+
+ Learn more
+
+
+
{status.message}
-
- )
- );
-
- return (
- <>
-
-
-
- {renderStatusMessage()}
-
-
-
- );
-};
-
-PlotlyAnalyticsPage.propTypes = {
- enterpriseId: PropTypes.string.isRequired,
- enableDemoData: PropTypes.bool.isRequired,
-};
-
-const mapStateToProps = state => ({
- enterpriseId: state.portalConfiguration.enterpriseId,
- enableDemoData: state.portalConfiguration.enableDemoData,
-});
-
-export default connect(mapStateToProps)(PlotlyAnalyticsPage);
diff --git a/src/components/PlotlyAnalytics/data/service.jsx b/src/components/PlotlyAnalytics/data/service.jsx
deleted file mode 100644
index 5156f5b831..0000000000
--- a/src/components/PlotlyAnalytics/data/service.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { configuration } from '../../../config';
-
-class PlotlyAnalyticsApiService {
- static lmsBaseUrl = configuration.LMS_BASE_URL;
-
- static plotlyTokenUrl = `${PlotlyAnalyticsApiService.lmsBaseUrl}/enterprise/api/v1/plotly_token`;
-
- static fetchPlotlyToken(options) {
- // eslint-disable-next-line no-unused-vars
- const queryParams = {
- ...options,
- };
- return getAuthenticatedHttpClient().get(`${PlotlyAnalyticsApiService.plotlyTokenUrl}/${queryParams.enterpriseUUID}`);
- }
-}
-
-export default PlotlyAnalyticsApiService;
diff --git a/src/components/PlotlyAnalytics/index.jsx b/src/components/PlotlyAnalytics/index.jsx
deleted file mode 100644
index 197bfcfbd9..0000000000
--- a/src/components/PlotlyAnalytics/index.jsx
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as PlotlyAnalyticsPage } from './PlotlyAnalyticsPage';
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index bb5f0891f3..3913813a5f 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -125,12 +125,6 @@ const Sidebar = ({
icon: ,
hidden: !features.ANALYTICS || !enableAnalyticsScreen,
},
- {
- title: 'AnalyticsV2',
- to: `${baseUrl}/admin/${ROUTE_NAMES.analyticsv2}`,
- icon: ,
- hidden: !features.ANALYTICS_V2,
- },
{
title: 'Code Management',
to: `${baseUrl}/admin/${ROUTE_NAMES.codeManagement}`,
diff --git a/src/components/learner-credit-management/FlexGroupDropdown.jsx b/src/components/learner-credit-management/FlexGroupDropdown.jsx
new file mode 100644
index 0000000000..1fc6183be3
--- /dev/null
+++ b/src/components/learner-credit-management/FlexGroupDropdown.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+ Form, MenuItem, Dropdown, Button,
+} from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+const FlexGroupDropdown = ({
+ enterpriseFlexGroups,
+ onCheckedGroupsChanged,
+ checkedGroups,
+ onHandleSubmitGroup,
+ dropdownToggleLabel,
+ dropdownRef,
+}) => {
+ const renderFlexGroupSelection = enterpriseFlexGroups.map(flexGroup => (
+
+ ));
+
+ return (
+
+
+ Groups
+
+ {dropdownToggleLabel}
+
+
+ {renderFlexGroupSelection}
+
+
+
+
+
+
+
+ );
+};
+
+FlexGroupDropdown.propTypes = {
+ checkedGroups: PropTypes.shape({
+ id: PropTypes.string,
+ memberEmails: PropTypes.arrayOf(PropTypes.string),
+ name: PropTypes.string,
+ checked: PropTypes.bool,
+ }).isRequired,
+ onHandleSubmitGroup: PropTypes.func.isRequired,
+ onCheckedGroupsChanged: PropTypes.func.isRequired,
+ enterpriseFlexGroups: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string,
+ uuid: PropTypes.string,
+ acceptedMembersCount: PropTypes.number,
+ })),
+ dropdownToggleLabel: PropTypes.string.isRequired,
+ dropdownRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+ ]),
+};
+
+export default FlexGroupDropdown;
diff --git a/src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx b/src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx
index 2acd9736be..67a897591b 100644
--- a/src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx
+++ b/src/components/learner-credit-management/assignment-modal/AssignmentModalContent.jsx
@@ -11,15 +11,29 @@ 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 FlexGroupDropdown from '../FlexGroupDropdown';
+import { GROUP_DROPDOWN_TEXT } from '../../PeopleManagement/constants';
const AssignmentModalContent = ({
- enterpriseId, course, courseRun, onEmailAddressesChange,
+ enterpriseId,
+ course,
+ courseRun,
+ onEmailAddressesChange,
+ enterpriseFlexGroups,
+ onGroupSelectionsChanged,
+ enterpriseFeatures,
}) => {
+ const shouldShowGroupsDropdown = enterpriseFeatures.enterpriseGroupsV2 && enterpriseFlexGroups?.length > 0;
const { subsidyAccessPolicyId } = useBudgetId();
const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
const spendAvailable = subsidyAccessPolicy.aggregates.spendAvailableUsd;
@@ -28,6 +42,22 @@ const AssignmentModalContent = ({
const [assignmentAllocationMetadata, setAssignmentAllocationMetadata] = useState({});
const intl = useIntl();
const { contentPrice } = courseRun;
+ const [groupMemberEmails, setGroupMemberEmails] = useState([]);
+ const [checkedGroups, setCheckedGroups] = useState({});
+ const [dropdownToggleLabel, setDropdownToggleLabel] = useState(GROUP_DROPDOWN_TEXT);
+ const {
+ dropdownRef,
+ handleCheckedGroupsChanged,
+ handleGroupsChanged,
+ handleSubmitGroup,
+ } = useGroupDropdownToggle({
+ checkedGroups,
+ dropdownToggleLabel,
+ onGroupSelectionsChanged,
+ setCheckedGroups,
+ setDropdownToggleLabel,
+ setGroupMemberEmails,
+ });
const handleEmailAddressInputChange = (e) => {
const inputValue = e.target.value;
setEmailAddressesInputValue(inputValue);
@@ -51,10 +81,22 @@ const AssignmentModalContent = ({
debouncedHandleEmailAddressesChanged(emailAddressesInputValue);
}, [emailAddressesInputValue, debouncedHandleEmailAddressesChanged]);
+ useEffect(() => {
+ handleGroupsChanged(checkedGroups);
+ const selectedGroups = Object.keys(checkedGroups).filter(group => checkedGroups[group].checked === true);
+ if (selectedGroups.length === 1) {
+ setDropdownToggleLabel(`${checkedGroups[selectedGroups[0]]?.name} (${checkedGroups[selectedGroups[0]]?.memberEmails.length})`);
+ } else if (selectedGroups.length > 1) {
+ setDropdownToggleLabel(`${selectedGroups.length} groups selected`);
+ } else {
+ setDropdownToggleLabel(GROUP_DROPDOWN_TEXT);
+ }
+ }, [checkedGroups, handleGroupsChanged]);
+
// Validate the learner emails from user input whenever it changes
useEffect(() => {
const allocationMetadata = isAssignEmailAddressesInputValueValid({
- learnerEmails,
+ learnerEmails: [...learnerEmails, ...groupMemberEmails],
remainingBalance: spendAvailable,
contentPrice,
});
@@ -68,10 +110,20 @@ const AssignmentModalContent = ({
}
if (allocationMetadata.canAllocate) {
onEmailAddressesChange(learnerEmails, { canAllocate: true });
+ onGroupSelectionsChanged(groupMemberEmails, { canAllocate: true });
} else {
onEmailAddressesChange([]);
+ onGroupSelectionsChanged([]);
}
- }, [onEmailAddressesChange, learnerEmails, contentPrice, spendAvailable, enterpriseId]);
+ }, [
+ onEmailAddressesChange,
+ learnerEmails,
+ contentPrice,
+ spendAvailable,
+ enterpriseId,
+ groupMemberEmails,
+ onGroupSelectionsChanged,
+ ]);
return (
@@ -97,6 +149,16 @@ const AssignmentModalContent = ({
description="Header for the section where we assign a course to learners"
/>
+ {shouldShowGroupsDropdown && (
+
+ )}
@@ -209,10 +271,20 @@ AssignmentModalContent.propTypes = {
contentPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}).isRequired,
onEmailAddressesChange: PropTypes.func.isRequired,
+ onGroupSelectionsChanged: PropTypes.func.isRequired,
+ enterpriseFlexGroups: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string,
+ uuid: PropTypes.string,
+ acceptedMembersCount: PropTypes.number,
+ })),
+ enterpriseFeatures: PropTypes.shape({
+ enterpriseGroupsV2: PropTypes.bool.isRequired,
+ }),
};
const mapStateToProps = state => ({
enterpriseId: state.portalConfiguration.enterpriseId,
+ enterpriseFeatures: state.portalConfiguration.enterpriseFeatures,
});
export default connect(mapStateToProps)(AssignmentModalContent);
diff --git a/src/components/learner-credit-management/assignment-modal/AssignmentModalSummaryErrorState.jsx b/src/components/learner-credit-management/assignment-modal/AssignmentModalSummaryErrorState.jsx
index d1832820ee..f8d0659aed 100644
--- a/src/components/learner-credit-management/assignment-modal/AssignmentModalSummaryErrorState.jsx
+++ b/src/components/learner-credit-management/assignment-modal/AssignmentModalSummaryErrorState.jsx
@@ -21,7 +21,7 @@ const AssignmentModalSummaryErrorState = () => (
description="Error message when course assignment fails due to invalid learner emails."
/>