feat: Added column for course product line in learner credit table (#996

)

Co-authored-by: IrfanUddinAhmad <[email protected]>

src/components/learner-credit-management/LearnerCreditAllocationTable.jsx

@@ -7,6 +7,7 @@ import moment from 'moment';
 
 import TableTextFilter from './TableTextFilter';
 import EmailAddressTableCell from './EmailAddressTableCell';
+import { getCourseProductLineText } from '../../utils';
 
 export const PAGE_SIZE = 20;
 export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array
@@ -52,6 +53,11 @@ const LearnerCreditAllocationTable = ({
           Cell: ({ row }) => moment(row.values.enrollmentDate).format('MMMM DD, YYYY'),
           disableFilters: true,
         },
+        {
+          Header: 'Product',
+          accessor: 'courseProductLine',
+          Cell: ({ row }) => getCourseProductLineText(row.values.courseProductLine),
+        },
       ]}
       initialTableOptions={{
         getRowId: row => row?.uuid?.toString(),
@@ -89,6 +95,7 @@ LearnerCreditAllocationTable.propTypes = {
       courseTitle: PropTypes.string.isRequired,
       courseListPrice: PropTypes.number.isRequired,
       enrollmentDate: PropTypes.string.isRequired,
+      courseProductLine: PropTypes.string.isRequired,
     })),
     itemCount: PropTypes.number.isRequired,
     pageCount: PropTypes.number.isRequired,

src/components/learner-credit-management/data/utils.js

@@ -58,6 +58,7 @@ export const transformUtilizationTableResults = results => results.map(result =>
   courseTitle: result.courseTitle,
   courseListPrice: result.courseListPrice,
   enrollmentDate: result.enrollmentDate,
+  courseProductLine: result.courseProductLine,
   uuid: uuidv4(),
 }));
 

src/components/learner-credit-management/tests/LearnerCreditAllocationTable.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  screen,
+  render,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import LearnerCreditAllocationTable from '../LearnerCreditAllocationTable';
+
+const LearnerCreditAllocationTableWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LearnerCreditAllocationTable {...props} />
+  </IntlProvider>
+);
+
+describe('<LearnerCreditAllocationTable />', () => {
+  it('renders with table data', () => {
+    const props = {
+      enterpriseUUID: 'test-enterprise-id',
+      isLoading: false,
+      tableData: {
+        results: [{
+          userEmail: '[email protected]',
+          courseTitle: 'course-title',
+          courseListPrice: 100,
+          enrollmentDate: '2-2-23',
+          courseProductLine: 'OCM',
+        }],
+        itemCount: 1,
+        pageCount: 1,
+      },
+      fetchTableData: jest.fn(),
+    };
+    props.fetchTableData.mockReturnValue(props.tableData);
+
+    render(<LearnerCreditAllocationTableWrapper {...props} />);
+
+    expect(screen.getByText('Open', { exact: false }));
+    expect(screen.getByText(props.tableData.results[0].userEmail.toString(), {
+      exact: false,
+    }));
+    expect(screen.getByText(props.tableData.results[0].courseTitle.toString(), {
+      exact: false,
+    }));
+    expect(screen.getByText(props.tableData.results[0].courseListPrice.toString(), {
+      exact: false,
+    }));
+    expect(screen.getByText('February', { exact: false }));
+  });
+});

src/utils.js

@@ -400,6 +400,12 @@ const pollAsync = async (pollFunc, timeout, interval, checkFunc) => {
   return false;
 };
 
+const getCourseProductLineText = (courseProductLine) => {
+  let courseProductLineText = '';
+  courseProductLineText = courseProductLine === 'OCM' ? 'Open Courses' : courseProductLine;
+  return courseProductLineText;
+};
+
 export {
   camelCaseDict,
   camelCaseDictArray,
@@ -433,4 +439,5 @@ export {
   capitalizeFirstLetter,
   pollAsync,
   isNotValidNumberString,
+  getCourseProductLineText,
 };