richie-education 3.1.3-dev24 → 3.1.3-dev28

package/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -65,6 +65,35 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
   const offerIcon = `icon-offer-${offer}` as OfferIconType;
   const offerCertificateIcon = hasCertificateOffer && IconTypeEnum.SCHOOL;
   const offerPrice = hasEnrollmentOffer && course.price;
+  const discountedPrice = course.discounted_price ?? null;
+  const hasDiscount = discountedPrice !== null;
+
+  let $price = null;
+
+  if (offerPrice) {
+    if (hasDiscount) {
+      $price = (
+        <div className="offer_prices">
+          <span className="offer__price offer__price--striked">
+            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+          </span>
+          <span className="offer__price offer__price--discounted">
+            <FormattedNumber
+              value={discountedPrice}
+              currency={course.price_currency}
+              style="currency"
+            />
+          </span>
+        </div>
+      );
+    } else {
+      $price = (
+        <span className="offer__price">
+          <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+        </span>
+      );
+    }
+  }
 
   return (
     <div className="course-glimpse-footer">
@@ -99,11 +128,7 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
           name={offerIcon}
           title={intl.formatMessage(courseOfferMessages[offer])}
         />
-        {offerPrice && (
-          <span className="offer__price">
-            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
-          </span>
-        )}
+        {$price}
       </div>
     </div>
   );

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

@@ -61,6 +61,8 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     price_currency: 'EUR',
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -170,6 +172,20 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     );
   });
 
+  it('renders a course glimpse with a discount', () => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, price: 100.0, discount: '30%', discounted_price: 70.0 },
+    });
+
+    const prices = container.getElementsByClassName('offer_prices');
+    expect(prices.length).toBe(1);
+    expect(prices[0].children.length).toBe(2);
+    const discountedPrice = container.getElementsByClassName('offer__price--discounted');
+    expect(discountedPrice.length).toBe(1);
+    expect(discountedPrice[0]).toHaveTextContent('€70.00');
+  });
+
   it('does not show certificate offer if the course does not offer a certificate', () => {
     const { container } = renderCourseGlimpse({
       contextProps,

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { RichieContextFactory, CourseLightFactory } from 'utils/test/factories/richie';
-import { getCourseGlimpseProps, CourseGlimpse } from 'components/CourseGlimpse';
+import { CourseLightFactory, RichieContextFactory } from 'utils/test/factories/richie';
+import { CourseGlimpse, getCourseGlimpseProps } from 'components/CourseGlimpse';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 
 export default {
   component: CourseGlimpse,
@@ -8,9 +9,79 @@ export default {
 
 type Story = StoryObj<typeof CourseGlimpse>;
 
+const richieContext = RichieContextFactory().one();
+const courseLight = CourseLightFactory().one();
+const courseGlimpseCourse = getCourseGlimpseProps(courseLight);
+
 export const RichieCourse: Story = {
   args: {
-    context: RichieContextFactory().one(),
-    course: getCourseGlimpseProps(CourseLightFactory().one()),
+    context: richieContext,
+    course: { ...courseGlimpseCourse },
+  },
+};
+
+export const certificateProduct: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Certificate Product',
+      offer: CourseOffer.FREE,
+      price: null,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: null,
+      discount: null,
+    },
+  },
+};
+
+export const certificateProductDiscount: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Certificate Product with Discount',
+      offer: CourseOffer.FREE,
+      price: null,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
+  },
+};
+
+export const credentialProduct: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Credential Product',
+      icon: null,
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: null,
+      certificate_price: null,
+      discounted_price: null,
+      discount: null,
+    },
+  },
+};
+
+export const credentialProductDiscount: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Credential Product with Discount',
+      icon: null,
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: null,
+      certificate_price: null,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
   },
 };

package/js/components/CourseGlimpse/index.tsx

@@ -49,6 +49,8 @@ export interface CourseGlimpseCourse {
   price_currency: string;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export interface CourseGlimpseProps {

package/js/components/CourseGlimpse/utils.ts

@@ -55,6 +55,8 @@ const getCourseGlimpsePropsFromOffering = (
     price_currency: offering.product.price_currency,
     discounted_price: offering.product.discounted_price || null,
     discount: offering.product.discount || null,
+    certificate_discounted_price: offering.product.certificate_discounted_price || null,
+    certificate_discount: offering.product.certificate_discount || null,
   };
 };
 
@@ -79,6 +81,8 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   certificate_offer: course.certificate_offer,
   offer: course.offer,
   certificate_price: course.certificate_price,
+  certificate_discounted_price: course.certificate_discounted_price,
+  certificate_discount: course.certificate_discount,
   discounted_price: course.discounted_price,
   discount: course.discount,
 });
@@ -120,6 +124,8 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     certificate_price: null,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 };
 

package/js/types/Course.ts

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

package/js/types/Joanie.ts

@@ -151,6 +151,8 @@ export interface Product {
   contract_definition?: ContractDefinition;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export interface CredentialProduct extends Product {

package/js/types/index.ts

@@ -42,6 +42,8 @@ export interface CourseRun {
   certificate_offer?: string;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export enum Priority {

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

@@ -207,6 +207,8 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     instructions: null,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });
 

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

@@ -85,6 +85,8 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     certificate_offer: certificateOffer,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });
 
@@ -248,5 +250,7 @@ export const CourseLightFactory = factory<Course>(() => {
     price_currency: 'EUR',
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.stories.tsx

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CourseRunFactory, PacedCourseFactory } from 'utils/test/factories/richie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { CourseCertificateOffer, CourseOffer } from '../../../../types/Course';
+import { SyllabusCourseRun } from '.';
+
+export default {
+  component: SyllabusCourseRun,
+  render: (args) => {
+    return StorybookHelper.wrapInApp(<SyllabusCourseRun {...args} />);
+  },
+} as Meta<typeof SyllabusCourseRun>;
+
+type Story = StoryObj<typeof SyllabusCourseRun>;
+
+const courseRun = CourseRunFactory().one();
+
+export const certificateSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const certificateDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      certificate_discounted_price: 80,
+      certificate_discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.tsx

@@ -128,6 +128,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -144,6 +151,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.tsx

@@ -119,6 +119,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -135,6 +142,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -1465,4 +1465,50 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(content).not.toContain('The certification process is');
     expect(content).not.toContain('<br>€59.99');
   });
+
+  it('renders price discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+      discounted_price: 30.0,
+      discount: '-20%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid access<br>€30.00</dd>');
+  });
+
+  it('renders certificate discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'free',
+      price: undefined,
+      certificate_offer: 'paid',
+      certificate_price: 100.0,
+      certificate_discounted_price: 70.0,
+      certificate_discount: '-30%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid certificate<br>€70.00</dd>');
+  });
 });

package/package.json

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

package/scss/objects/_course_glimpses.scss

@@ -396,6 +396,11 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       }
     }
 
+    .offer_prices {
+      display: flex;
+      flex-direction: column;
+    }
+
     .offer__price {
       $visibility: r-theme-val(course-glimpse, offer-price-visibility);
       @if $visibility == hidden {
@@ -404,6 +409,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       visibility: $visibility;
       // Align vertically the price with the icon
       margin-top: calc(1ex - 1cap);
+
+      &--striked,
+      &--discounted {
+        display: inline-block;
+      }
+
+      &--striked {
+        text-decoration: line-through;
+        opacity: 0.5;
+      }
     }
   }
 }