feat: adds price range for lc variant based assignments

openedx · Sep 16, 2024 · f75e9d1 · f75e9d1
1 parent 13e9d7f
commit f75e9d1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 38 deletions.
diff --git a/__mocks__/react-instantsearch-dom.jsx b/__mocks__/react-instantsearch-dom.jsx
@@ -37,6 +37,7 @@ const fakeHits = [
       pacing_type: 'self_paced',
       weeks_to_complete: 8,
       upgrade_deadline: dayjs(mockCurrentStartDate).add(3, 'months').unix(),
+      content_price: 100,
     },
     key: 'Bees101',
     normalized_metadata: mockNormalizedData,
@@ -52,6 +53,7 @@ const fakeHits = [
         pacing_type: 'self_paced',
         weeks_to_complete: 8,
         upgrade_deadline: dayjs(mockCurrentStartDate).add(3, 'months').unix(),
+        content_price: 100,
       },
       {
         key: 'course-v1:edX+Bee101+3T2020',
@@ -64,6 +66,7 @@ const fakeHits = [
         pacing_type: 'self_paced',
         weeks_to_complete: 8,
         upgrade_deadline: dayjs('2020-09-09T04:00:00Z').add(3, 'months').unix(),
+        content_price: 100,
       },
     ],
   },
@@ -85,6 +88,7 @@ const fakeHits = [
       pacing_type: 'self_paced',
       weeks_to_complete: 8,
       upgrade_deadline: dayjs('2022-10-09T04:00:00Z').add(3, 'months').unix(),
+      content_price: 100,
     },
     key: 'Wasps200',
     normalized_metadata: mockNormalizedData,
@@ -100,6 +104,7 @@ const fakeHits = [
         pacing_type: 'self_paced',
         weeks_to_complete: 8,
         upgrade_deadline: dayjs('2022-10-09T04:00:00Z').add(3, 'months').unix(),
+        content_price: 100,
       },
       {
         key: 'course-v1:edX+Wasps200+3T2020',
@@ -112,6 +117,7 @@ const fakeHits = [
         pacing_type: 'self_paced',
         weeks_to_complete: 8,
         upgrade_deadline: dayjs('2020-09-09T04:00:00Z').add(3, 'months').unix(),
+        content_price: 100,
       },
     ],
   },

diff --git a/src/components/learner-credit-management/cards/BaseCourseCard.jsx b/src/components/learner-credit-management/cards/BaseCourseCard.jsx
@@ -2,17 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {
-  useMediaQuery,
-  breakpoints,
-  Card,
-  Stack,
-  Badge,
+  Badge, breakpoints, Card, Stack, useMediaQuery,
 } from '@openedx/paragon';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { useCourseCardMetadata } from './data';
 import AssignmentModalImportantDates from '../assignment-modal/AssignmentModalmportantDates';
+import { formatPrice } from '../data';
 
 const BaseCourseCard = ({
   original,
@@ -23,7 +20,6 @@ const BaseCourseCard = ({
 }) => {
   const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
-
   const courseCardMetadata = useCourseCardMetadata({
     course: camelCaseObject(original),
     courseRun,
@@ -54,7 +50,7 @@ const BaseCourseCard = ({
           subtitle={subtitle}
           actions={(
             <Stack gap={1} className="text-right">
-              <div className="h4 mt-2.5 mb-0">{formattedPrice}</div>
+              <div className="h4 mt-2.5 mb-0">{courseRun ? formatPrice(courseRun.contentPrice) : formattedPrice}</div>
               <span className="micro">
                 <FormattedMessage
                   id="lcm.budget.detail.page.catalog.tab.course.card.price.per.learner"
@@ -124,6 +120,7 @@ BaseCourseCard.propTypes = {
   }).isRequired,
   courseRun: PropTypes.shape({
     enrollBy: PropTypes.string,
+    contentPrice: PropTypes.number,
     start: PropTypes.string,
   }),
   footerActions: PropTypes.elementType,

diff --git a/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx b/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx
@@ -4,9 +4,7 @@ import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.pn
 
 import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  CARD_TEXT,
   EXEC_ED_COURSE_TYPE,
-  formatDate,
   formatPrice,
   getAssignableCourseRuns,
   getEnrollmentDeadline,
@@ -15,8 +13,6 @@ import {
 } from '../../data';
 import { pluralText } from '../../../../utils';
 
-const { ENROLLMENT } = CARD_TEXT;
-
 const messages = defineMessages({
   courseFooterMessage: {
     id: 'lcm.budget.detail.page.catalog.tab.course.card.footer-text',
@@ -25,6 +21,21 @@ const messages = defineMessages({
   },
 });
 
+const getContentPriceDisplay = ({ courseRuns }) => {
+  const flatContentPrice = courseRuns.flatMap(run => run?.contentPrice);
+  // Find the max and min prices
+  const maxPrice = Math.max(...flatContentPrice);
+  const minPrice = Math.min(...flatContentPrice);
+  // Heuristic for displaying the price as a range or a singular price based on runs
+  if (flatContentPrice.length > 1 && maxPrice !== minPrice) {
+    return `${formatPrice(minPrice)} - ${formatPrice(maxPrice)}`;
+  }
+  if (flatContentPrice.length === 1) {
+    return formatPrice(flatContentPrice[0]);
+  }
+  return 'N/A';
+};
+
 const useCourseCardMetadata = ({
   course,
   enterpriseSlug,
@@ -34,7 +45,6 @@ const useCourseCardMetadata = ({
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
   const {
-    availability,
     cardImageUrl,
     courseType,
     key,
@@ -43,7 +53,15 @@ const useCourseCardMetadata = ({
     title,
     courseRuns,
   } = course;
-  const formattedPrice = (normalizedMetadata.contentPrice || normalizedMetadata.contentPrice === 0) ? formatPrice(normalizedMetadata.contentPrice) : 'N/A';
+  const assignableCourseRuns = getAssignableCourseRuns({
+    courseRuns,
+    subsidyExpirationDatetime: subsidyAccessPolicy.subsidyExpirationDatetime,
+    isLateRedemptionAllowed: subsidyAccessPolicy.isLateRedemptionAllowed,
+  });
+
+  // Extracts the content price from assignable course runs
+  const formattedPrice = getContentPriceDisplay({ courseRuns: assignableCourseRuns });
+
   const imageSrc = cardImageUrl || cardFallbackImg;
 
   let logoSrc;
@@ -54,28 +72,15 @@ const useCourseCardMetadata = ({
   }
 
   const altText = `${title} course image`;
-  const formattedAvailability = availability?.length ? availability.join(', ') : null;
   const enrollmentDeadline = getEnrollmentDeadline(normalizedMetadata.enrollByDate);
 
-  let courseEnrollmentInfo = '';
-  if (formattedAvailability) {
-    courseEnrollmentInfo = `${formattedAvailability} • `;
-  }
-  courseEnrollmentInfo += `${ENROLLMENT.text} ${enrollmentDeadline}`;
-  const execEdEnrollmentInfo = `Starts ${formatDate(normalizedMetadata.startDate)} • ${ENROLLMENT.text} ${enrollmentDeadline}`;
-
   const isExecEdCourseType = courseType === EXEC_ED_COURSE_TYPE;
 
   let linkToCourse = `${ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${key}`;
   if (isExecEdCourseType) {
     linkToCourse = `${ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/executive-education-2u/course/${key}`;
   }
 
-  const assignableCourseRuns = getAssignableCourseRuns({
-    courseRuns,
-    subsidyExpirationDatetime: subsidyAccessPolicy.subsidyExpirationDatetime,
-    isLateRedemptionAllowed: subsidyAccessPolicy.isLateRedemptionAllowed,
-  });
   const footerText = intl.formatMessage(messages.courseFooterMessage, {
     courseRuns: assignableCourseRuns.length,
     pluralText: pluralText('date', assignableCourseRuns.length),
@@ -90,8 +95,6 @@ const useCourseCardMetadata = ({
     logoSrc,
     logoAlt,
     enrollmentDeadline,
-    courseEnrollmentInfo,
-    execEdEnrollmentInfo,
     linkToCourse,
     isExecEdCourseType,
     footerText,

diff --git a/src/components/learner-credit-management/cards/tests/CourseCard.test.jsx b/src/components/learner-credit-management/cards/tests/CourseCard.test.jsx
@@ -12,13 +12,13 @@ import { renderWithRouter, sendEnterpriseTrackEvent } from '@edx/frontend-enterp
 import dayjs from 'dayjs';
 import CourseCard from '../CourseCard';
 import {
-  formatPrice,
   DATETIME_FORMAT,
+  formatPrice,
+  getNormalizedEnrollByDate,
   learnerCreditManagementQueryKeys,
   SHORT_MONTH_DATE_FORMAT,
   useBudgetId,
   useSubsidyAccessPolicy,
-  getNormalizedEnrollByDate,
 } from '../../data';
 import { getButtonElement, queryClient } from '../../../test/testUtils';
 
@@ -79,6 +79,7 @@ const originalData = {
       is_active: true,
       weeks_to_complete: 60,
       end: dayjs().add(1, 'years').toISOString(),
+      content_price: '100',
     },
   ],
   advertised_course_run: {
@@ -90,6 +91,7 @@ const originalData = {
     is_active: true,
     weeks_to_complete: 60,
     end: dayjs().add(1, 'year').toISOString(),
+    content_price: '100',
   },
 };
 const imageAltText = `${originalData.title} course image`;
@@ -121,6 +123,7 @@ const execEdData = {
       is_active: true,
       weeks_to_complete: 60,
       end: dayjs().add(1, 'year').toISOString(),
+      content_price: 999,
     },
   ],
   advertised_course_run: {
@@ -132,6 +135,7 @@ const execEdData = {
     is_active: true,
     weeks_to_complete: 60,
     end: dayjs().add(1, 'year').toISOString(),
+    content_price: 999,
   },
   original_image_url: '',
   partners: [{ logo_image_url: '', name: 'Course Provider' }],

diff --git a/webpack.dev.config.js b/webpack.dev.config.js