feat: update course about sidebar to take into account usd fixed price

src/components/app/data/hooks/useCourseRedemptionEligibility.js

@@ -6,6 +6,23 @@ import { queryCanRedeem } from '../queries';
 import useEnterpriseCustomer from './useEnterpriseCustomer';
 import useLateEnrollmentBufferDays from './useLateEnrollmentBufferDays';
 
+const getContentListPrice = ({ courseRuns }) => {
+  console.log(courseRuns);
+  const flatContentPrice = courseRuns.flatMap(run => run.listPrice?.usd).filter(x => !!x);
+  console.log(flatContentPrice);
+  // Find the max and min prices
+  if (!flatContentPrice.length) {
+    return null;
+  }
+  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 (maxPrice !== minPrice) {
+    return [minPrice, maxPrice];
+  }
+  return [flatContentPrice[0]];
+};
+
 export function transformCourseRedemptionEligibility({
   courseMetadata,
   canRedeemData,
@@ -17,7 +34,7 @@ export function transformCourseRedemptionEligibility({
   const otherSubsidyAccessPolicy = canRedeemData.find(
     r => r.redeemableSubsidyAccessPolicy,
   )?.redeemableSubsidyAccessPolicy;
-  const listPrice = redeemabilityForActiveCourseRun?.listPrice?.usd;
+  const listPrice = getContentListPrice({ courseRuns: canRedeemData });
   const hasSuccessfulRedemption = courseRunKey
     ? !!canRedeemData.find(r => r.contentKey === courseRunKey)?.hasSuccessfulRedemption
     : canRedeemData.some(r => r.hasSuccessfulRedemption);

src/components/course/CourseSidebarPrice.jsx

@@ -8,13 +8,27 @@ import {
   useCoursePrice,
   useIsCourseAssigned,
   useUserSubsidyApplicableToCourse,
+  ZERO_PRICE,
 } from './data';
 import {
+  ENTERPRISE_OFFER_SUBSIDY_TYPE,
   LEARNER_CREDIT_SUBSIDY_TYPE,
   LICENSE_SUBSIDY_TYPE,
-  ENTERPRISE_OFFER_SUBSIDY_TYPE,
   useEnterpriseCustomer,
 } from '../app/data';
+import { sumOfArray } from '../../utils/common';
+
+const getContentPriceDisplay = (priceRange) => {
+  if (!priceRange?.length) {
+    return numberWithPrecision(ZERO_PRICE);
+  }
+  const minPrice = Math.min(...priceRange);
+  const maxPrice = Math.max(...priceRange);
+  if (maxPrice !== minPrice) {
+    return `${numberWithPrecision(minPrice)} - ${numberWithPrecision(maxPrice)}`;
+  }
+  return numberWithPrecision(priceRange.sort((a, b) => a - b)[0]);
+};
 
 const CourseSidebarPrice = () => {
   const intl = useIntl();
@@ -23,12 +37,11 @@ const CourseSidebarPrice = () => {
   const { isCourseAssigned } = useIsCourseAssigned();
   const canRequestSubsidy = useCanUserRequestSubsidyForCourse();
   const { userSubsidyApplicableToCourse } = useUserSubsidyApplicableToCourse();
-
   if (!coursePrice) {
     return <Skeleton containerTestId="course-price-skeleton" height={24} />;
   }
-
-  const originalPriceDisplay = numberWithPrecision(coursePrice.list);
+  console.log(coursePrice);
+  const originalPriceDisplay = getContentPriceDisplay(coursePrice.listRange);
   const showOrigPrice = !enterpriseCustomer.hideCourseOriginalPrice;
   const crossedOutOriginalPrice = (
     <del>
@@ -62,8 +75,7 @@ const CourseSidebarPrice = () => {
     );
   }
 
-  const hasDiscountedPrice = coursePrice.discounted < coursePrice.list;
-
+  const hasDiscountedPrice = sumOfArray(coursePrice.discounted || []) < sumOfArray(coursePrice.listRange);
   // Case 2: No subsidies found but learner can request a subsidy
   if (!hasDiscountedPrice && canRequestSubsidy) {
     return (
@@ -113,14 +125,13 @@ const CourseSidebarPrice = () => {
       });
     }
   }
-  const discountedPriceDisplay = `${numberWithPrecision(coursePrice.discounted)} ${currency}`;
-
+  const discountedPriceDisplay = `${getContentPriceDisplay(coursePrice.discounted)} ${currency}`;
   return (
     <>
       <div className={classNames({ 'mb-2': coursePrice.discounted > 0 || showOrigPrice })}>
         {/* discounted > 0 means partial discount */}
         {showOrigPrice && <>{crossedOutOriginalPrice}{' '}</>}
-        {coursePrice.discounted > 0 && (
+        {sumOfArray(coursePrice.discounted) > 0 && (
           <>
             <span className="sr-only">
               <FormattedMessage

src/components/course/data/hooks.jsx

@@ -36,7 +36,10 @@ import { canUserRequestSubsidyForCourse, getExternalCourseEnrollmentUrl } from '
 import { createExecutiveEducationFailureMessage } from '../../executive-education-2u/ExecutiveEducation2UError';
 import { SUBSIDY_TYPE } from '../../../constants';
 import {
+  COUPON_CODE_SUBSIDY_TYPE,
+  determineAllocatedAssignmentsForCourse,
   getSubsidyToApplyForCourse,
+  LICENSE_SUBSIDY_TYPE,
   useBrowseAndRequest,
   useBrowseAndRequestConfiguration,
   useCatalogsForSubsidyRequests,
@@ -48,9 +51,6 @@ import {
   useEnterpriseOffers,
   useRedeemablePolicies,
   useSubscriptions,
-  COUPON_CODE_SUBSIDY_TYPE,
-  LICENSE_SUBSIDY_TYPE,
-  determineAllocatedAssignmentsForCourse,
 } from '../../app/data';
 import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
 import { CourseContext } from '../CourseContextProvider';
@@ -201,21 +201,26 @@ export const useCoursePriceForUserSubsidy = ({
       if (!listPrice) {
         return null;
       }
+      console.log(listPrice, userSubsidyApplicableToCourse);
 
       const onlyListPrice = {
-        list: listPrice,
+        listRange: listPrice,
       };
 
       if (userSubsidyApplicableToCourse) {
         const { discountType, discountValue } = userSubsidyApplicableToCourse;
-        let discountedPrice;
+        let discountedPrice = [];
 
         if (discountType && discountType.toLowerCase() === SUBSIDY_DISCOUNT_TYPE_MAP.PERCENTAGE.toLowerCase()) {
-          discountedPrice = listPrice - (listPrice * (discountValue / 100));
+          discountedPrice = onlyListPrice.listRange.map(
+            (individualPrice) => individualPrice - (individualPrice * (discountValue / 100)),
+          );
         }
 
         if (discountType && discountType.toLowerCase() === SUBSIDY_DISCOUNT_TYPE_MAP.ABSOLUTE.toLowerCase()) {
-          discountedPrice = Math.max(listPrice - discountValue, 0);
+          discountedPrice = onlyListPrice.listRange.map(
+            (individualPrice) => Math.max(individualPrice - discountValue, 0),
+          );
         }
 
         if (isDefinedAndNotNull(discountedPrice)) {
@@ -226,7 +231,7 @@ export const useCoursePriceForUserSubsidy = ({
         }
         return {
           ...onlyListPrice,
-          discounted: onlyListPrice.list,
+          discounted: onlyListPrice.listRange,
         };
       }
 
@@ -631,6 +636,7 @@ export const useUserSubsidyApplicableToCourse = () => {
 export function useCoursePrice() {
   const { data: courseListPrice } = useCourseListPrice();
   const { userSubsidyApplicableToCourse } = useUserSubsidyApplicableToCourse();
+  console.log(courseListPrice, userSubsidyApplicableToCourse);
   return useCoursePriceForUserSubsidy({
     userSubsidyApplicableToCourse,
     listPrice: courseListPrice,

src/components/course/data/utils.jsx

@@ -154,6 +154,16 @@ export function getProgramIcon(type) {
 
 export const numberWithPrecision = (number, precision = 2) => number.toFixed(precision);
 
+export const formatPrice = (price, options = {}) => {
+  const USDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    ...options,
+  });
+  return USDollar.format(Math.abs(price));
+};
+
 /**
  *
  * @param couponCodes
@@ -817,10 +827,14 @@ export function getEntitlementPrice(entitlements) {
  * @returns Price for the course run.
  */
 export function getCoursePrice(course) {
+  console.log(course);
+  if (course.activeCourseRun?.fixedPriceUsd) {
+    return [course.activeCourseRun?.fixedPriceUsd];
+  }
   if (course.activeCourseRun?.firstEnrollablePaidSeatPrice) {
-    return course.activeCourseRun.firstEnrollablePaidSeatPrice;
+    return [course.activeCourseRun?.firstEnrollablePaidSeatPrice];
   }
-  return getEntitlementPrice(course.entitlements);
+  return [course.entitlements];
 }
 
 /**

src/utils/common.js

@@ -25,6 +25,9 @@ export const isNull = (value) => {
 };
 
 export const isDefinedAndNotNull = (value) => {
+  if (Array.isArray(value)) {
+    return value.every(item => isDefined(item) && !isNull(item));
+  }
   const values = createArrayFromValue(value);
   return values.every(item => isDefined(item) && !isNull(item));
 };
@@ -39,6 +42,8 @@ export const hasTruthyValue = (value) => {
   return values.every(item => !!item);
 };
 
+export const sumOfArray = (values) => values.reduce((prev, next) => prev + next, 0);
+
 export const hasValidStartExpirationDates = ({ startDate, expirationDate, endDate }) => {
   const now = dayjs();
   // Subscriptions use "expirationDate" while Codes use "endDate"