From 92c90b6447ade57e9c40b12a3b35c89df60ef664 Mon Sep 17 00:00:00 2001
From: Aura Alba <aura.alba@edunext.co>
Date: Thu, 21 Nov 2024 12:54:02 -0500
Subject: [PATCH] feat: change enrollment info

---
 .../InstructorCard/__test__/index.test.jsx    | 44 +++++++++++++++++++
 src/features/Classes/InstructorCard/index.jsx | 13 +++---
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/features/Classes/InstructorCard/__test__/index.test.jsx b/src/features/Classes/InstructorCard/__test__/index.test.jsx
index bfba6db..19bc36b 100644
--- 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
index 560d61e..dcf9a9a 100644
--- 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>
           </>
         )}