richie-education 2.34.1-dev2 → 2.34.1-dev22

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -27,7 +27,7 @@ jest.mock('settings', () => ({
   CONTRACT_SETTINGS: {
     ...jest.requireActual('settings').CONTRACT_SETTINGS,
     pollInterval: 10,
-    dummySignatureSignTimeout: 10,
+    dummySignatureSignTimeout: 50,
   },
 }));
 
@@ -204,12 +204,10 @@ describe('<AbstractContractFrame />', () => {
     await user.click(button);
 
     // The dummy interface should be loading
-    screen.getByRole('heading', { name: 'Signing the contract ...' });
+    await screen.findByRole('heading', { name: 'Signing the contract ...' });
 
     // Then the signature check polling should be started
-    await waitFor(() => {
-      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
-    });
+    await screen.findByRole('heading', { name: 'Verifying signature ...' });
     expect(
       screen.getByText(
         'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',

package/js/components/Icon/index.tsx

@@ -35,6 +35,7 @@ export enum IconTypeEnum {
   CHEVRON_RIGHT_OUTLINE = 'icon-chevron-right-outline',
   CHEVRON_UP_OUTLINE = 'icon-chevron-up-outline',
   CLOCK = 'icon-clock',
+  COURSES = 'icon-courses',
   CREDIT_CARD = 'icon-creditCard',
   CROSS = 'icon-cross',
   DURATION = 'icon-duration',
@@ -49,6 +50,7 @@ export enum IconTypeEnum {
   LOGOUT_SQUARE = 'icon-logout-square',
   MAGNIFYING_GLASS = 'icon-magnifying-glass',
   MENU = 'icon-menu',
+  MONEY = 'icon-money',
   MORE = 'icon-more',
   ORG = 'icon-org',
   PACE = 'icon-pace',

package/js/hooks/useCreditCards/index.spec.tsx

@@ -208,8 +208,9 @@ describe('useCreditCards', () => {
     await act(async () => {
       responseDeferred.resolve({});
     });
-
-    expect(result.current.states.updating).toBe(false);
+    await waitFor(() => {
+      expect(result.current.states.updating).toBe(false);
+    });
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.spec.tsx

@@ -181,7 +181,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     await screen.findByText('Credit cards');
 
     // The title is correctly updated.
-    screen.getByRole('heading', {
+    await screen.findByRole('heading', {
       level: 6,
       name: creditCardUpdated.title,
     });

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/factories/richie.ts

@@ -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,
   };
 });
 

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

@@ -139,11 +139,12 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
         <ol className="course-runs-list">
           {Children.toArray(
             courseRuns.map((courseRun) => (
-              <li className="course-runs-item form-field">
+              <li key={`${order.id}|${courseRun.id}`} className="course-runs-item form-field">
                 <input
                   className="form-field__radio-input"
                   type="radio"
                   id={`${order.id}|${courseRun.id}`}
+                  data-testid={`radio-input-${order.id}-${courseRun.id}`}
                   name={order.id}
                   disabled={needsSignature}
                   aria-label={intl.formatMessage(messages.ariaSelectCourseRun, {

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/index.spec.tsx

@@ -166,11 +166,13 @@ describe('CourseProductCourseRuns', () => {
         );
 
         // - A radio input
-        screen.getByRole('radio', {
-          name: `Select course run from ${dateFormatter.format(
+        const $input = screen.getByTestId(`radio-input-${order.id}-${courseRun.id}`);
+        expect($input).toHaveAttribute('type', 'radio');
+        expect($input).toHaveAccessibleName(
+          `Select course run from ${dateFormatter.format(
             new Date(courseRun.start),
           )} to ${dateFormatter.format(new Date(courseRun.end))}.`,
-        });
+        );
       });
 
       // A call to action should be displayed
@@ -215,7 +217,7 @@ describe('CourseProductCourseRuns', () => {
       });
 
       // A spinner should be displayed
-      screen.getByRole('status', { name: 'Enrolling...' });
+      await screen.findByRole('status', { name: 'Enrolling...' });
 
       await act(async () => {
         enrollmentDeferred.resolve(HttpStatusCode.OK);

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} />