richie-education 3.1.3-dev17 → 3.1.3-dev23

package/js/components/CourseGlimpse/index.spec.tsx

@@ -59,6 +59,8 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     certificate_offer: CourseCertificateOffer.FREE,
     certificate_price: null,
     price_currency: 'EUR',
+    discounted_price: null,
+    discount: null,
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();

package/js/components/CourseGlimpse/index.tsx

@@ -47,6 +47,8 @@ export interface CourseGlimpseCourse {
   certificate_price: Nullable<number>;
   price: Nullable<number>;
   price_currency: string;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
 }
 
 export interface CourseGlimpseProps {

package/js/components/CourseGlimpse/utils.ts

@@ -53,6 +53,8 @@ const getCourseGlimpsePropsFromOffering = (
       offering.product.type === ProductType.CERTIFICATE ? offering.product.price : null,
     price: offering.product.type === ProductType.CREDENTIAL ? offering.product.price : null,
     price_currency: offering.product.price_currency,
+    discounted_price: offering.product.discounted_price || null,
+    discount: offering.product.discount || null,
   };
 };
 
@@ -77,6 +79,8 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   certificate_offer: course.certificate_offer,
   offer: course.offer,
   certificate_price: course.certificate_price,
+  discounted_price: course.discounted_price,
+  discount: course.discount,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
@@ -114,6 +118,8 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     certificate_offer: null,
     offer: null,
     certificate_price: null,
+    discounted_price: null,
+    discount: null,
   };
 };
 

package/js/types/Course.ts

@@ -47,6 +47,8 @@ export interface Course extends Resource {
   certificate_price: Nullable<number>;
   price: Nullable<number>;
   price_currency: string;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
 }
 
 export function isRichieCourse(course: Course | JoanieCourse): course is Course {

package/js/types/Joanie.ts

@@ -149,6 +149,8 @@ export interface Product {
   state: CourseState;
   instructions: Nullable<string>;
   contract_definition?: ContractDefinition;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
 }
 
 export interface CredentialProduct extends Product {

package/js/types/index.ts

@@ -35,11 +35,13 @@ export interface CourseRun {
   title?: string;
   snapshot?: string;
   display_mode: CourseRunDisplayMode;
-  price?: number;
+  price?: Nullable<number>;
   price_currency?: string;
   offer?: string;
-  certificate_price?: number;
+  certificate_price?: Nullable<number>;
   certificate_offer?: string;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
 }
 
 export enum Priority {

package/js/utils/test/factories/joanie.ts

@@ -205,6 +205,8 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     remaining_order_count: faker.number.int({ min: 1, max: 100 }),
     state: CourseStateFactory().one(),
     instructions: null,
+    discounted_price: null,
+    discount: null,
   };
 });
 

package/js/utils/test/factories/richie.ts

@@ -60,11 +60,11 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     certificateOfferValues[Math.floor(Math.random() * certificateOfferValues.length)];
   const currency = faker.finance.currency().code;
   const price = [OfferType.FREE, OfferType.PARTIALLY_FREE].includes(offer)
-    ? 0
+    ? null
     : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
   const certificatePrice =
     certificateOffer === OfferType.FREE
-      ? 0
+      ? null
       : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
   return {
     id: faker.number.int(),
@@ -83,6 +83,8 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     offer,
     certificate_price: certificatePrice,
     certificate_offer: certificateOffer,
+    discounted_price: null,
+    discount: null,
   };
 });
 
@@ -244,5 +246,7 @@ export const CourseLightFactory = factory<Course>(() => {
     certificate_price: null,
     price: null,
     price_currency: 'EUR',
+    discounted_price: null,
+    discount: null,
   };
 });

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/_styles.scss

@@ -67,6 +67,11 @@
       }
     }
 
+    & .product-widget__header-main {
+      display: flex;
+      justify-content: center;
+    }
+
     & .product-widget__title {
       color: r-theme-val(product-item, light-color);
       font-size: 1.5rem;
@@ -76,7 +81,7 @@
       background-color: r-theme-val(product-item, light-color);
       border-radius: 100vw;
       color: r-theme-val(product-item, base-border);
-      font-size: 0.81rem;
+      font-size: 1rem;
       margin-bottom: 0.3rem;
       padding: 0.375rem 0.81rem;
       white-space: nowrap;
@@ -90,6 +95,7 @@
 
       &-discount {
         color: r-theme-val(product-item, feedback-color);
+        text-decoration: none;
       }
     }
 

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/CourseRunList.tsx

@@ -68,7 +68,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </strong>
               <span
                 data-testid={`course-run-${courseRun.id}-enrollment-dates`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__enrollment-date"
               >
                 <EnrollmentDate
                   enrollment_start={courseRun.enrollment_start}
@@ -77,7 +77,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </span>
               <span
                 data-testid={`course-run-${courseRun.id}-languages`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__languages"
               >
                 <FormattedMessage
                   {...sharedMessages.language}

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/_styles.scss

@@ -113,6 +113,15 @@
       line-height: 1.4em;
     }
 
+    &__enrollment-date {
+      font-weight: bold;
+      color: #03317f;
+    }
+
+    &__languages {
+      font-weight: bold;
+    }
+
     &__feedback {
       color: r-theme-val(product-item, feedback-color);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.1.3-dev17",
+  "version": "3.1.3-dev23",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {