Merge pull request #130 from Pearson-Advance/vue/PADV-1813

PADV-1813 feat: change enrollment info
Pearson-Advance · Nov 21, 2024 · ba9ce7b · ba9ce7b
2 parents 0bd8d68 + 92c90b6
commit ba9ce7b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/src/features/Classes/InstructorCard/__test__/index.test.jsx b/src/features/Classes/InstructorCard/__test__/index.test.jsx
@@ -171,4 +171,48 @@ describe('InstructorCard', () => {
 
     expect(getByText('Feb 13-20, 2024')).toBeInTheDocument();
   });
+
+  test('Should render enrollment info with 1 seat remaining', () => {
+    const { getByText } = renderWithProviders(
+      <InstructorCard isOpen onClose={() => { }} />,
+      {
+        preloadedState: {
+          classes: {
+            allClasses: {
+              data: [
+                {
+                  ...stateMock.classes.allClasses.data[0],
+                  purchasedSeats: 4,
+                },
+              ],
+            },
+          },
+        },
+      },
+    );
+
+    expect(getByText('3 enrolled, 1 seat remaining')).toBeInTheDocument();
+  });
+
+  test('Should render enrollment info with more than 1 seat remaining', () => {
+    const { getByText } = renderWithProviders(
+      <InstructorCard isOpen onClose={() => { }} />,
+      {
+        preloadedState: {
+          classes: {
+            allClasses: {
+              data: [
+                {
+                  ...stateMock.classes.allClasses.data[0],
+                  purchasedSeats: 10,
+                },
+              ],
+            },
+          },
+        },
+      },
+    );
+
+    expect(getByText('3 enrolled, 7 seats remaining')).toBeInTheDocument();
+  });
 });
diff --git a/src/features/Classes/InstructorCard/index.jsx b/src/features/Classes/InstructorCard/index.jsx
@@ -28,8 +28,12 @@ const InstructorCard = () => {
     (classElement) => classElement.classId === classIdDecoded,
   );
 
-  const totalEnrolled = (classInfo?.numberOfStudents || 0)
-    + (classInfo?.numberOfPendingStudents || 0);
+  const { purchasedSeats, numberOfStudents, numberOfPendingStudents } = classInfo || {};
+
+  const totalEnrolled = (numberOfStudents || 0)
+    + (numberOfPendingStudents || 0);
+
+  const remainingSeats = (purchasedSeats - numberOfStudents - numberOfPendingStudents) || 0;
 
   useEffect(() => {
     if (institution.id) {
@@ -66,10 +70,7 @@ const InstructorCard = () => {
             </div>
             <div className="text-color">
               <b className="mr-1">Enrollment:</b>
-              {classInfo?.minStudentsAllowed && (
-                <>minimum {classInfo.minStudentsAllowed}, </>
-              )}
-              enrolled {totalEnrolled}, maximum {classInfo?.maxStudents}
+              {totalEnrolled} enrolled, {remainingSeats} seat{remainingSeats > 1 && 's'} remaining
             </div>
           </>
         )}