richie-education 2.34.1-dev4 → 2.34.1-dev44

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonElement, Input } from '@openfun/cunningham-react';
+import { ButtonElement, Input, Alert, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
@@ -8,7 +8,6 @@ import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import Form, { getLocalizedCunninghamErrorProp } from 'components/Form';
 import { Spinner } from 'components/Spinner';
-import Banner, { BannerType } from 'components/Banner';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 
 const messages = defineMessages({
@@ -19,14 +18,15 @@ const messages = defineMessages({
   },
   fullNameInputLabel: {
     id: 'components.OpenEdxFullNameForm.fullNameInputLabel',
-    description: 'Label of "fullName" field of the openEdx full name form',
-    defaultMessage: 'Full name',
+    description: 'Label of "First name and last name" field of the openEdx full name form',
+    defaultMessage: 'First name and last name',
   },
   fullNameInputDescription: {
     id: 'components.OpenEdxFullNameForm.fullNameInputDescription',
-    description: 'Descripiton on the "fullName" field of the openEdx full name form.',
+    description:
+      'Description about the "First name and last name" field of the openEdx full name form.',
     defaultMessage:
-      'Please check that your fullname is correct. It will be used on official document (e.g: certificate)',
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
   },
   submitButtonLabel: {
     id: 'components.OpenEdxFullNameForm.submitButtonLabel',
@@ -128,27 +128,24 @@ const OpenEdxFullNameForm = () => {
 
   if (error) {
     // display get error message
-    return <Banner type={BannerType.ERROR} message={error} />;
+    return <Alert type={VariantType.ERROR}>{error}</Alert>;
   }
 
   return (
     <FormProvider {...form}>
       <Form name="openedx-fullname-form" noValidate>
+        <Alert type={formState.errors.name?.message ? VariantType.ERROR : VariantType.WARNING}>
+          <FormattedMessage {...messages.fullNameInputDescription} />
+        </Alert>
         <Input
           {...register('name')}
-          className="form-field"
+          className="form-field mt-s"
           required
           fullWidth
           label={intl.formatMessage(messages.fullNameInputLabel)}
           value={formState.defaultValues?.name}
-          state={
-            error || (formState.errors.name && formState.errors.name.message) ? 'error' : 'default'
-          }
-          text={
-            error ||
-            getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text ||
-            intl.formatMessage(messages.fullNameInputDescription)
-          }
+          state={error || formState.errors.name?.message ? 'error' : 'default'}
+          text={error || getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text}
         />
       </Form>
     </FormProvider>

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -184,7 +184,7 @@ describe('SaleTunnel', () => {
      */
     screen.getByText('Information');
 
-    const nameInput = screen.getByLabelText('Full name');
+    const nameInput = screen.getByLabelText('First name and last name');
     await user.type(nameInput, 'John Doe');
 
     /**

package/js/types/Course.ts

@@ -3,6 +3,19 @@ import { Resource } from 'types/Resource';
 import { Nullable } from 'types/utils';
 import { CourseListItem as JoanieCourse } from 'types/Joanie';
 
+export enum CourseOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  PARTIALLY_FREE = 'partially_free',
+  SUBSCRIPTION = 'subscription',
+}
+
+export enum CourseCertificateOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  SUBSCRIPTION = 'subscription',
+}
+
 export interface Course extends Resource {
   absolute_url: string;
   categories: string[];
@@ -29,6 +42,11 @@ export interface Course extends Resource {
   }>;
   organizations: string[];
   state: CourseState;
+  certificate_offer: Nullable<CourseCertificateOffer>;
+  offer: Nullable<CourseOffer>;
+  certificate_price: Nullable<number>;
+  price: Nullable<number>;
+  price_currency: string;
 }
 
 export function isRichieCourse(course: Course | JoanieCourse): course is Course {

package/js/types/index.ts

@@ -35,6 +35,11 @@ export interface CourseRun {
   title?: string;
   snapshot?: string;
   display_mode: CourseRunDisplayMode;
+  price?: number;
+  price_currency?: string;
+  offer?: string;
+  certificate_price?: number;
+  certificate_offer?: string;
 }
 
 export enum Priority {

package/js/utils/test/expectAlert.ts

@@ -0,0 +1,63 @@
+import { waitFor } from '@testing-library/react';
+import { VariantType } from '@openfun/cunningham-react';
+
+export const expectAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.WARNING, message, rootElement);
+};
+
+export const expectAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(async () => {
+    // Cunningham Alert has a class with the alert variant type
+    const alert = rootElement.querySelector(`.c__alert--${type}`) as HTMLElement;
+    expect(alert).not.toBeNull();
+    expect(alert).toHaveTextContent(message);
+  });
+};
+
+export const expectNoAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(() => {
+    // Check that no alert exists with this message and type
+    const alerts = rootElement.querySelectorAll('.c__alert');
+    const matchingAlert = Array.from(alerts).find(
+      (alert) =>
+        alert.classList.contains(`c__alert--${type}`) && alert.textContent?.includes(message),
+    );
+    expect(matchingAlert).toBeUndefined();
+  });
+};
+
+export const expectNoAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectNoAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectNoAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectNoAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.WARNING, message, rootElement);
+};

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

@@ -10,7 +10,7 @@ import {
   PacedCourse,
   Priority,
 } from 'types';
-import { Course } from 'types/Course';
+import { CourseCertificateOffer, Course, CourseOffer } from 'types/Course';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { factory } from './factories';
 
@@ -45,7 +45,27 @@ export const CourseStateFutureOpenFactory = factory<CourseState>(() => {
   };
 });
 
+enum OfferType {
+  PAID = 'PAID',
+  FREE = 'FREE',
+  PARTIALLY_FREE = 'PARTIALLY_FREE',
+  SUBSCRIPTION = 'SUBSCRIPTION',
+}
+
 export const CourseRunFactory = factory<CourseRun>(() => {
+  const offerValues = Object.values(OfferType);
+  const offer = offerValues[Math.floor(Math.random() * offerValues.length)];
+  const certificateOfferValues = [OfferType.PAID, OfferType.FREE, OfferType.SUBSCRIPTION];
+  const certificateOffer =
+    certificateOfferValues[Math.floor(Math.random() * certificateOfferValues.length)];
+  const currency = faker.finance.currency().code;
+  const price = [OfferType.FREE, OfferType.PARTIALLY_FREE].includes(offer)
+    ? 0
+    : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
+  const certificatePrice =
+    certificateOffer === OfferType.FREE
+      ? 0
+      : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
   return {
     id: faker.number.int(),
     resource_link: FactoryHelper.unique(faker.internet.url),
@@ -58,6 +78,11 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     dashboard_link: null,
     title: faker.lorem.sentence(3),
     display_mode: CourseRunDisplayMode.DETAILED,
+    price,
+    price_currency: currency,
+    offer,
+    certificate_price: certificatePrice,
+    certificate_offer: certificateOffer,
   };
 });
 
@@ -214,5 +239,10 @@ export const CourseLightFactory = factory<Course>(() => {
     },
     organizations: [organizationName],
     state: CourseStateFactory().one(),
+    certificate_offer: CourseCertificateOffer.FREE,
+    offer: CourseOffer.FREE,
+    certificate_price: null,
+    price: null,
+    price_currency: 'EUR',
   };
 });

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

@@ -46,6 +46,51 @@ const messages = defineMessages({
     description: 'Course date of an opened course run block',
     defaultMessage: 'From {startDate} {endDate, select, undefined {} other {to {endDate}}}',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRun.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRun.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRun.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRun.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRun.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRun.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRun.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedCourseRun = ({
@@ -63,6 +108,44 @@ const OpenedCourseRun = ({
   const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
   const start = courseRun.start ? formatDate(courseRun.start) : '...';
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -99,6 +182,30 @@ const OpenedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />

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

@@ -41,6 +41,51 @@ const messages = defineMessages({
     description: 'Self paced course run block with no end date',
     defaultMessage: 'Available',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRunCompacted.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRunCompacted.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRunCompacted.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedSelfPacedCourseRun = ({
@@ -54,6 +99,44 @@ const OpenedSelfPacedCourseRun = ({
   const intl = useIntl();
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
   const hasEndDate = end !== '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -83,6 +166,30 @@ const OpenedSelfPacedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />