feat: add progress bar

src/components/dashboard/main-content/course-enrollments/CourseSection.jsx

@@ -1,8 +1,9 @@
-import { Suspense, useState } from 'react';
+import { Suspense, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
-import { Bubble, Collapsible, Skeleton } from '@openedx/paragon';
+import { Bubble, Collapsible, Skeleton, ProgressBar } from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
+import { getProgressTabData } from './course-cards/mark-complete-modal/data/service';
 
 import {
   AssignedCourseCard,
@@ -101,9 +102,27 @@
     );
   };
 
+  const [progress, setProgress] = useState({});
+  const fetchData = useCallback(
+    async (courseRun) => {
+      try {
+        const result = await getProgressTabData(courseRun);
+        setProgress(result);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    [],
+  );
+
   const renderCourseCards = () => courseRuns.map(courseRun => {
     const Component = CARD_COMPONENT_BY_COURSE_STATUS[courseRun.courseRunStatus];
     const isAuditEnrollment = isEnrollmentUpgradeable(courseRun);
+    useEffect(() => {
+      fetchData(courseRun.courseRunId);
+    }, [fetchData]);
+    const numTotalUnits = progress?.completionSummary?.completeCount + progress?.completionSummary?.incompleteCount + progress?.completionSummary?.lockedCount;
+    const completePercentage = progress?.completionSummary?.completeCount ? Number(((progress?.completionSummary?.completeCount / numTotalUnits) * 100).toFixed(0)) : 0;
     if (isAuditEnrollment && courseRun.courseRunStatus === COURSE_STATUSES.inProgress) {
       return (
         <Suspense
@@ -115,15 +134,27 @@
             </DelayedFallbackContainer>
           )}
         >
-          <Component {...getCourseRunProps(courseRun)} />
+          <div>
+            <Component
+              {...getCourseRunProps(courseRun)}
+              key={courseRun.courseRunId}
+            />
+            <ProgressBar now={`${completePercentage}%`} label={`${completePercentage}%`} variant="primary" />
+            <br />
+          </div>
         </Suspense>
       );
     }
     return (
-      <Component
-        {...getCourseRunProps(courseRun)}
-        key={courseRun.courseRunId}
-      />
+      <div>
+        <Component
+          {...getCourseRunProps(courseRun)}
+          key={courseRun.courseRunId}
+        />
+        <ProgressBar now={`${completePercentage}%`} label={`${completePercentage}%`} variant="primary" />
+        <br />
+      </div>
+
     );
   });
 

src/components/dashboard/main-content/course-enrollments/course-cards/mark-complete-modal/data/service.js

@@ -1,5 +1,6 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
 
 export const ENROLL_ENDPOINT = '/enterprise_learner_portal/api/v1/enterprise_course_enrollments/';
 
@@ -24,3 +25,21 @@ export const updateCourseCompleteStatusRequest = (options) => {
   }
   return getAuthenticatedHttpClient().patch(url);
 };
+
+
+export async function getProgressTabData(courseId, targetUserId) {
+  let url = `${getConfig().LMS_BASE_URL}/api/course_home/progress/${courseId}`;
+
+  if (targetUserId) {
+    url += `/${targetUserId}/`;
+  }
+
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    const camelCasedData = camelCaseObject(data);
+
+    return camelCasedData;
+  } catch (error) {
+    throw error;
+  }
+}