Merge pull request #20 from open-craft/agrendalath/bb-9902-remove-required-completion

Agrendalath · web-flow · commit 13479033b228 · 2025-10-13T17:23:52.000+02:00
feat: remove required completion scaling
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-craft/frontend-app-learning-paths",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Frontend application template",
   "repository": {
     "type": "git",
diff --git a/src/learningpath/CourseCard.jsx b/src/learningpath/CourseCard.jsx
@@ -129,11 +129,14 @@ export const CourseCard = ({
           <Card.Section className="pt-4 pt-md-1 pb-1"><h3>{name}</h3></Card.Section>
           <Card.Section className="pt-1 pb-1">
             {status.toLowerCase() === 'in progress' && !!statusVariant && (
-              <ProgressBar
-                now={progressBarPercent}
-                label={`${progressBarPercent}%`}
-                variant="primary"
-              />
+              <>
+                <ProgressBar
+                  now={progressBarPercent}
+                  label={`${progressBarPercent}%`}
+                  variant="primary"
+                />
+                <div className="x-small text-right pt-1">content completed</div>
+              </>
             )}
           </Card.Section>
           <Card.Footer orientation="horizontal" className="pt-3 pb-3 justify-content-between">
diff --git a/src/learningpath/CourseDetails.jsx b/src/learningpath/CourseDetails.jsx
@@ -21,7 +21,7 @@ import {
   Close,
   ChevronLeft,
 } from '@openedx/paragon/icons';
-import { useCourseDetail, useOrganizations } from './data/queries';
+import { useCourseDetail, useOrganizations, useCredentialConfiguration } from './data/queries';
 import { buildAssetUrl, replaceStaticAssetReferences } from '../util/assetUrl';
 import { buildCourseHomeUrl } from './utils';
 import { useScreenSize } from '../hooks/useScreenSize';
@@ -66,6 +66,9 @@ const CourseDetailContent = ({
     logo: organizations[org]?.logo,
   }), [organizations, org]);
 
+  const { data: credentialConfig } = useCredentialConfiguration(activeCourseKey);
+  const hasCertificate = credentialConfig?.hasCredentials;
+
   return (
     <>
       <div className="hero">
@@ -126,13 +129,15 @@ const CourseDetailContent = ({
               </div>
             </div>
           )}
-          <div className="d-flex align-items-center">
-            <Icon src={Award} className="mr-4 mb-3.5" />
-            <div>
-              <p className="mb-0 font-weight-bold">Certificate</p>
-              <p className="mb-0 text-muted">Earn a certificate</p>
+          {hasCertificate && (
+            <div className="d-flex align-items-center">
+              <Icon src={Award} className="mr-4 mb-3.5" />
+              <div>
+                <p className="mb-0 font-weight-bold">Certificate</p>
+                <p className="mb-0 text-muted">Earn a certificate</p>
+              </div>
             </div>
-          </div>
+          )}
           {duration && (
             <div className="d-flex align-items-center">
               <Icon src={Calendar} className="mr-4 mb-3.5" />
diff --git a/src/learningpath/Dashboard.jsx b/src/learningpath/Dashboard.jsx
@@ -143,7 +143,7 @@ const Dashboard = () => {
 
   // Get only the organizations that are present in the user's items.
   const availableOrganizations = useMemo(() => {
-    if (!organizations || !items.length) { return {}; }
+    if (!organizations || !items.length) { return []; }
 
     const availableOrgKeys = new Set();
     items.forEach(item => {
@@ -152,14 +152,9 @@ const Dashboard = () => {
       }
     });
 
-    const filteredOrgs = {};
-    availableOrgKeys.forEach(orgKey => {
-      if (organizations[orgKey]) {
-        filteredOrgs[orgKey] = organizations[orgKey];
-      }
-    });
-
-    return filteredOrgs;
+    return Array.from(availableOrgKeys, orgKey => organizations[orgKey])
+      .filter(Boolean)
+      .sort((a, b) => (a.name || a.shortName).localeCompare(b.name || b.shortName));
   }, [organizations, items]);
 
   const activeFiltersCount = useMemo(
diff --git a/src/learningpath/FilterPanel.jsx b/src/learningpath/FilterPanel.jsx
@@ -104,7 +104,7 @@ const FilterPanel = ({
     </div>
 
     {/* Organization Checkboxes */}
-    {organizations && Object.keys(organizations).length > 0 && (
+    {organizations && organizations.length > 0 && (
       <div className="my-3">
         <Form.Group>
           <Form.Label className="h4 my-3">Program Type</Form.Label>
@@ -113,9 +113,9 @@ const FilterPanel = ({
             onChange={e => onChangeOrg(e.target.value, e.target.checked)}
             value={selectedOrgs}
           >
-            {Object.entries(organizations).map(([shortName, org]) => (
-              <Form.Checkbox key={shortName} value={shortName} className="font-weight-light">
-                {org.name || shortName}
+            {organizations.map(org => (
+              <Form.Checkbox key={org.shortName} value={org.shortName} className="font-weight-light">
+                {org.name || org.shortName}
               </Form.Checkbox>
             ))}
           </Form.CheckboxSet>
@@ -142,10 +142,10 @@ FilterPanel.propTypes = {
   onChangeDateStatus: PropTypes.func.isRequired,
   selectedOrgs: PropTypes.arrayOf(PropTypes.string).isRequired,
   onChangeOrg: PropTypes.func.isRequired,
-  organizations: PropTypes.objectOf(
+  organizations: PropTypes.arrayOf(
     PropTypes.shape({
-      name: PropTypes.string,
-      shortName: PropTypes.string,
+      name: PropTypes.string.isRequired,
+      shortName: PropTypes.string.isRequired,
     }),
   ).isRequired,
   onClose: PropTypes.func.isRequired,
diff --git a/src/learningpath/LearningPathCard.jsx b/src/learningpath/LearningPathCard.jsx
@@ -97,7 +97,7 @@ const LearningPathCard = ({ learningPath, showFilters = false }) => {
     logo: organizations[org]?.logo,
   }), [organizations, org]);
 
-  const progressBarPercent = percent ? +percent.toFixed(1) : '0.0';
+  const progressBarPercent = useMemo(() => +(percent * 100).toFixed(1), [percent]);
 
   return (
     <Card orientation={orientation} className={`lp-card ${orientation}`} onMouseEnter={handleMouseEnter}>
@@ -117,11 +117,14 @@ const LearningPathCard = ({ learningPath, showFilters = false }) => {
         <Card.Section className="pt-1 pb-1 card-subtitle text-muted">{subtitleLine}</Card.Section>
         <Card.Section className="pt-1 pb-1">
           {status.toLowerCase() === 'in progress' && !!statusVariant && (
-            <ProgressBar
-              now={progressBarPercent}
-              label={`${progressBarPercent}%`}
-              variant="primary"
-            />
+            <>
+              <ProgressBar
+                now={progressBarPercent}
+                label={`${progressBarPercent}%`}
+                variant="primary"
+              />
+              <div className="x-small text-right pt-1">content completed</div>
+            </>
           )}
         </Card.Section>
         <Card.Footer orientation="horizontal" className="pt-3 pb-3 justify-content-between">
diff --git a/src/learningpath/LearningPathDetails.jsx b/src/learningpath/LearningPathDetails.jsx
@@ -210,7 +210,7 @@ const LearningPathDetailPage = () => {
             <Icon src={Award} className="mr-4 mb-3.5" />
             <div>
               <p className="mb-0 font-weight-bold">Certificate</p>
-              <p className="mb-0 text-muted">Courses include certification</p>
+              <p className="mb-0 text-muted">Awarded upon completing the learning path</p>
             </div>
           </div>
           <div className="d-flex">
diff --git a/src/learningpath/data/api.js b/src/learningpath/data/api.js
@@ -183,3 +183,18 @@ export async function fetchOrganizations() {
     logo: org.logo,
   })));
 }
+
+export async function fetchCredentialConfiguration(learningContextKey) {
+  const client = getAuthenticatedHttpClient();
+  try {
+    const response = await client.get(
+      `${getConfig().LMS_BASE_URL}/api/learning_credentials/v1/configured/${encodeURIComponent(learningContextKey)}/`,
+    );
+    return camelCaseObject(response.data);
+  } catch (error) {
+    return {
+      hasCredentials: false,
+      credentialCount: 0,
+    };
+  }
+}
diff --git a/src/learningpath/data/queries.js b/src/learningpath/data/queries.js
@@ -4,6 +4,7 @@ import * as api from './api';
 import {
   addCompletionStatus,
   addLearningPaths,
+  calculateCompletionStatus,
   createCompletionsMap,
   createCourseToLearningPathsMap,
 } from './dataUtils';
@@ -19,6 +20,7 @@ export const QUERY_KEYS = {
   COURSE_COMPLETION: (courseId) => ['courseCompletion', courseId],
   COURSE_ENROLLMENT_STATUS: (courseId) => ['courseEnrollmentStatus', courseId],
   ORGANIZATIONS: ['organizations'],
+  CREDENTIAL_CONFIGURATION: (learningContextKey) => ['credentialConfiguration', learningContextKey],
 };
 
 // Stale time configurations
@@ -33,6 +35,7 @@ export const STALE_TIMES = {
   COMPLETIONS: 60 * 1000, // 1 minute
 
   ORGANIZATIONS: 60 * 60 * 1000, // 1 hour
+  CREDENTIALS: 5 * 60 * 1000, // 5 minutes
 };
 
 // Learning Paths Queries
@@ -72,22 +75,8 @@ export const useLearningPaths = () => {
           return sum + (completion?.percent ?? 0);
         }, 0);
 
-        const progress = totalCompletion / totalCourses;
-        const requiredCompletion = lp.requiredCompletion || 0;
-
-        let status = 'In progress';
-        if (progress === 0) {
-          status = 'Not started';
-        } else if (progress >= requiredCompletion) {
-          status = 'Completed';
-        }
-
-        let percent = 0;
-        if (requiredCompletion > 0) {
-          percent = Math.round((progress / requiredCompletion) * 100);
-        } else {
-          percent = Math.round(progress * 100);
-        }
+        const percent = totalCompletion / totalCourses;
+        const { status } = calculateCompletionStatus(percent);
 
         let minDate = null;
         let maxDate = null;
@@ -292,6 +281,12 @@ export const useCourseDetail = (courseKey) => {
         queryFn: api.fetchAllCourseCompletions,
       });
 
+      queryClient.prefetchQuery({
+        queryKey: QUERY_KEYS.CREDENTIAL_CONFIGURATION(courseKey),
+        queryFn: () => api.fetchCredentialConfiguration(courseKey),
+        staleTime: STALE_TIMES.CREDENTIALS,
+      });
+
       const completions = queryClient.getQueryData(QUERY_KEYS.COURSE_COMPLETIONS) || {};
       const completionsMap = createCompletionsMap(completions);
 
@@ -324,6 +319,12 @@ export const usePrefetchCourseDetail = (courseId) => {
           queryFn: () => api.fetchCourseCompletion(courseId),
           staleTime: STALE_TIMES.COMPLETIONS,
         });
+
+        queryClient.prefetchQuery({
+          queryKey: QUERY_KEYS.CREDENTIAL_CONFIGURATION(courseId),
+          queryFn: () => api.fetchCredentialConfiguration(courseId),
+          staleTime: STALE_TIMES.CREDENTIALS,
+        });
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('Error prefetching course data:', error);
@@ -399,3 +400,10 @@ export const useOrganizations = () => useQuery({
   },
   staleTime: STALE_TIMES.ORGANIZATIONS,
 });
+
+export const useCredentialConfiguration = (learningContextKey) => useQuery({
+  queryKey: QUERY_KEYS.CREDENTIAL_CONFIGURATION(learningContextKey),
+  queryFn: () => api.fetchCredentialConfiguration(learningContextKey),
+  enabled: !!learningContextKey,
+  staleTime: STALE_TIMES.CREDENTIALS,
+});
diff --git a/src/learningpath/index.css b/src/learningpath/index.css
@@ -153,6 +153,10 @@
     }
 
     .pgn__card-wrapper-image-cap {
+      /* Enforce vertical logos to be square.
+      The `height` is overridden in the hero - that's why we're not using `max-height` here. */
+      height: 240px;
+
       .pgn__card-image-cap {
         /* The default (`auto`) value does not work in Safari. */
         width: 240px !important;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@open-craft/frontend-app-learning-paths",`
`3`		`- "version": "0.1.3",`
	`3`	`+ "version": "0.1.4",`
`4`	`4`	`"description": "Frontend application template",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`