richie 2.34.1.dev23__py2.py3-none-any.whl → 3.2.1__py2.py3-none-any.whl

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

@@ -1,9 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router';
 import { CommonDataProps } from 'types/commonDataProps';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseStateTextEnum } from 'types';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 import { CourseGlimpse, CourseGlimpseCourse } from '.';
 
 const renderCourseGlimpse = ({
@@ -53,6 +54,15 @@ describe('widgets/Search/components/CourseGlimpse', () => {
       text: CourseStateTextEnum.STARTING_ON,
     },
     title: 'Course 42',
+    offer: CourseOffer.PAID,
+    price: 42.0,
+    certificate_offer: CourseCertificateOffer.FREE,
+    certificate_price: null,
+    price_currency: 'EUR',
+    discounted_price: null,
+    discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -63,6 +73,11 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // first text we encounter should be the title, so that screen reader users get it first
     expect(container.textContent?.indexOf('Course 42')).toBe(0);
 
+    // The course glimpse container should have the a variant class according to their offers
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass('course-glimpse--offer-paid');
+    expect(containerElement).toHaveClass('course-glimpse--offer-certificate');
+
     // The link that wraps the course glimpse should have no title as its content is explicit enough
     const link = container.querySelector('.course-glimpse__link');
     expect(link).not.toHaveAttribute('title');
@@ -73,9 +88,9 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     screen.getByLabelText('Organization');
     screen.getByText('Some Organization');
     screen.getByText('Category');
-    // Matches on 'Starting on Mar 14, 2019', date is wrapped with intl <span>
-    screen.getByLabelText('Course date');
-    screen.getByText('Starting on Mar 14, 2019');
+    // Matches on 'Starting on March 14, 2019', date is wrapped with intl <span>
+    screen.getByLabelText('Availability');
+    screen.getByText('Starting on March 14, 2019');
 
     // Check course logo
     const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');
@@ -97,6 +112,17 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // The logo is rendered along with alt text "" as it is decorative and included in a link block
     expect(orgImg).toHaveAttribute('alt', '');
     expect(orgImg).toHaveAttribute('src', '/thumbs/org_small.png');
+
+    // Check certificate offer
+    within(container).getByRole('img', { name: 'An exam is available' });
+
+    // Check offer information
+    const offerIcon = within(container).getByRole('img', { name: 'Access requires payment' });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', '#icon-offer-paid');
+
+    const offerPrice = offerIcon.nextSibling;
+    expect(offerPrice).toHaveTextContent('€42.00');
   });
 
   it('works when there is no call to action or datetime on the state (eg. an archived course)', () => {
@@ -115,8 +141,8 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     // Make sure the component renders and shows the state
     screen.getByRole('heading', { name: 'Course 42', level: 3 });
     const dateFormatter = Intl.DateTimeFormat('en', {
-      day: '2-digit',
-      month: 'short',
+      day: 'numeric',
+      month: 'long',
       year: 'numeric',
     });
     const formatedDatetime = dateFormatter.format(new Date(course.state.datetime!));
@@ -145,4 +171,71 @@ describe('widgets/Search/components/CourseGlimpse', () => {
       'course-glimpse__metadata--code',
     );
   });
+
+  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,
+      course: { ...course, certificate_offer: null },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).not.toHaveClass('course-glimpse--offer-certificate');
+
+    const certificicateOfferIcon = within(container).queryByRole('img', {
+      name: 'The course offers a certification.',
+    });
+    expect(certificicateOfferIcon).not.toBeInTheDocument();
+  });
+
+  it('does show free course offer if the course has no offer', () => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, offer: null },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass('course-glimpse--offer-free');
+
+    const offerIcon = within(container).getByRole('img', {
+      name: 'All content is available for free',
+    });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', '#icon-offer-free');
+
+    // And no price is shown
+    expect(offerIcon.nextSibling).not.toBeInTheDocument();
+  });
+
+  it.each([
+    [CourseOffer.FREE, 'All content is available for free'],
+    [CourseOffer.PARTIALLY_FREE, 'Most of the content is available for free'],
+    [CourseOffer.PAID, 'Access requires payment'],
+    [CourseOffer.SUBSCRIPTION, 'Access requires a subscription'],
+  ])('does show a specific course offer icon', (offer, altText) => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, offer },
+    });
+
+    const containerElement = container.querySelector('.course-glimpse');
+    expect(containerElement).toHaveClass(`course-glimpse--offer-${offer}`);
+
+    const offerIcon = within(container).getByRole('img', { name: altText });
+    const useElement = offerIcon.lastChild;
+    expect(useElement).toHaveAttribute('href', `#icon-offer-${offer}`);
+  });
 });

frontend/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 €',
+    },
   },
 };

frontend/js/components/CourseGlimpse/index.tsx

@@ -1,10 +1,12 @@
 import React, { memo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import c from 'classnames';
 
 import { Nullable } from 'types/utils';
 import { CommonDataProps } from 'types/commonDataProps';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CourseState } from 'types';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 import { CourseGlimpseFooter } from './CourseGlimpseFooter';
 import CourseLink from './CourseLink';
 
@@ -40,6 +42,15 @@ export interface CourseGlimpseCourse {
   duration?: string;
   effort?: string;
   categories?: string[];
+  certificate_offer: Nullable<CourseCertificateOffer>;
+  offer: Nullable<CourseOffer>;
+  certificate_price: Nullable<number>;
+  price: Nullable<number>;
+  price_currency: string;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export interface CourseGlimpseProps {
@@ -71,91 +82,100 @@ const messages = defineMessages({
 
 const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataProps) => {
   const intl = useIntl();
+  const offer = course.offer ?? CourseOffer.FREE;
+  const hasCertificateOffer = course.certificate_offer !== null;
   return (
-    <div className="course-glimpse" data-testid="course-glimpse">
-      {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
+    <div
+      className={c('course-glimpse', `course-glimpse--offer-${offer}`, {
+        'course-glimpse--offer-certificate': hasCertificateOffer,
+      })}
+      data-testid="course-glimpse"
+    >
+      <div className="course-glimpse__body">
+        {/* the media link is only here for mouse users, so hide it for keyboard/screen reader users.
       Keyboard/sr will focus the link on the title */}
-      <div aria-hidden="true" className="course-glimpse__media">
-        <CourseLink
-          tabIndex={-1}
-          className="course-glimpse__link"
-          href={course.course_url}
-          to={course.course_route}
-        >
-          {/* alt forced to empty string because it's a decorative image */}
-          {course.cover_image ? (
-            <img
-              alt=""
-              sizes={course.cover_image.sizes}
-              src={course.cover_image.src}
-              srcSet={course.cover_image.srcset}
-            />
-          ) : (
-            <div className="course-glimpse__media__empty">
-              <FormattedMessage {...messages.cover} />
-            </div>
-          )}
-        </CourseLink>
-      </div>
-      <div className="course-glimpse__content">
-        <div className="course-glimpse__wrapper">
-          <h3 className="course-glimpse__title">
-            <CourseLink
-              className="course-glimpse__link"
-              href={course.course_url}
-              to={course.course_route}
-            >
-              <span className="course-glimpse__title-text">{course.title}</span>
-            </CourseLink>
-          </h3>
-          {course.organization.image ? (
-            <div className="course-glimpse__organization-logo">
-              {/* alt forced to empty string because the organization name is rendered after */}
+        <div aria-hidden="true" className="course-glimpse__media">
+          <CourseLink
+            tabIndex={-1}
+            className="course-glimpse__link"
+            href={course.course_url}
+            to={course.course_route}
+          >
+            {/* alt forced to empty string because it's a decorative image */}
+            {course.cover_image ? (
               <img
                 alt=""
-                sizes={course.organization.image.sizes}
-                src={course.organization.image.src}
-                srcSet={course.organization.image.srcset}
+                sizes={course.cover_image.sizes}
+                src={course.cover_image.src}
+                srcSet={course.cover_image.srcset}
               />
-            </div>
-          ) : null}
-          <div className="course-glimpse__metadata course-glimpse__metadata--organization">
-            <Icon
-              name={IconTypeEnum.ORG}
-              title={intl.formatMessage(messages.organizationIconAlt)}
-              size="small"
-            />
-            <span className="title">{course.organization.title}</span>
-          </div>
-          <div className="course-glimpse__metadata course-glimpse__metadata--code">
-            <Icon
-              name={IconTypeEnum.BARCODE}
-              title={intl.formatMessage(messages.codeIconAlt)}
-              size="small"
-            />
-            <span>{course.code || '-'}</span>
-          </div>
+            ) : (
+              <div className="course-glimpse__media__empty">
+                <FormattedMessage {...messages.cover} />
+              </div>
+            )}
+          </CourseLink>
         </div>
-        {course.icon ? (
-          <div className="course-glimpse__icon">
-            <span className="category-badge">
-              {/* alt forced to empty string because it's a decorative image */}
-              <img
-                alt=""
-                className="category-badge__icon"
-                sizes={course.icon.sizes}
-                src={course.icon.src}
-                srcSet={course.icon.srcset}
+        <div className="course-glimpse__content">
+          <div className="course-glimpse__wrapper">
+            <h3 className="course-glimpse__title">
+              <CourseLink
+                className="course-glimpse__link"
+                href={course.course_url}
+                to={course.course_route}
+              >
+                <span className="course-glimpse__title-text">{course.title}</span>
+              </CourseLink>
+            </h3>
+            {course.organization.image ? (
+              <div className="course-glimpse__organization-logo">
+                {/* alt forced to empty string because the organization name is rendered after */}
+                <img
+                  alt=""
+                  sizes={course.organization.image.sizes}
+                  src={course.organization.image.src}
+                  srcSet={course.organization.image.srcset}
+                />
+              </div>
+            ) : null}
+            <div className="course-glimpse__metadata course-glimpse__metadata--organization">
+              <Icon
+                name={IconTypeEnum.ORG}
+                title={intl.formatMessage(messages.organizationIconAlt)}
+                size="small"
               />
-              <span className="offscreen">
-                <FormattedMessage {...messages.categoryLabel} />
-              </span>
-              <span className="category-badge__title">{course.icon.title}</span>
-            </span>
+              <span className="title">{course.organization.title}</span>
+            </div>
+            <div className="course-glimpse__metadata course-glimpse__metadata--code">
+              <Icon
+                name={IconTypeEnum.BARCODE}
+                title={intl.formatMessage(messages.codeIconAlt)}
+                size="small"
+              />
+              <span>{course.code || '-'}</span>
+            </div>
           </div>
-        ) : null}
-        <CourseGlimpseFooter context={context} course={course} />
+          {course.icon ? (
+            <div className="course-glimpse__icon">
+              <span className="category-badge">
+                {/* alt forced to empty string because it's a decorative image */}
+                <img
+                  alt=""
+                  className="category-badge__icon"
+                  sizes={course.icon.sizes}
+                  src={course.icon.src}
+                  srcSet={course.icon.srcset}
+                />
+                <span className="offscreen">
+                  <FormattedMessage {...messages.categoryLabel} />
+                </span>
+                <span className="category-badge__title">{course.icon.title}</span>
+              </span>
+            </div>
+          ) : null}
+        </div>
       </div>
+      <CourseGlimpseFooter context={context} course={course} />
     </div>
   );
 };

frontend/js/components/CourseGlimpse/utils.ts

@@ -1,22 +1,28 @@
 import { IntlShape } from 'react-intl';
 import { generatePath } from 'react-router';
-import { Course as RichieCourse, isRichieCourse } from 'types/Course';
+import {
+  CourseCertificateOffer,
+  CourseOffer,
+  Course as RichieCourse,
+  isRichieCourse,
+} from 'types/Course';
 import {
   CourseListItem as JoanieCourse,
-  CourseProductRelationLight,
-  isCourseProductRelation,
+  OfferingLight,
+  isOffering,
+  ProductType,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
 
-const getCourseGlimpsePropsFromCourseProductRelation = (
-  courseProductRelation: CourseProductRelationLight,
+const getCourseGlimpsePropsFromOffering = (
+  offering: OfferingLight,
   intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
   const courseRouteParams = {
-    courseId: courseProductRelation.course.id,
-    courseProductRelationId: courseProductRelation.id,
+    courseId: offering.course.id,
+    offeringId: offering.id,
   };
   const courseRoute = organizationId
     ? generatePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT, {
@@ -25,21 +31,32 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
       })
     : generatePath(TeacherDashboardPaths.COURSE_PRODUCT, courseRouteParams);
   return {
-    id: courseProductRelation.id,
-    code: courseProductRelation.course.code,
-    title: courseProductRelation.product.title,
-    cover_image: courseProductRelation.course.cover
+    id: offering.id,
+    code: offering.course.code,
+    title: offering.product.title,
+    cover_image: offering.course.cover
       ? {
-          src: courseProductRelation.course.cover.src,
+          src: offering.course.cover.src,
         }
       : null,
     organization: {
-      title: courseProductRelation.organizations[0].title,
-      image: courseProductRelation.organizations[0].logo || null,
+      title: offering.organizations[0].title,
+      image: offering.organizations[0].logo || null,
     },
-    product_id: courseProductRelation.product.id,
+    product_id: offering.product.id,
     course_route: courseRoute,
-    state: courseProductRelation.product.state,
+    state: offering.product.state,
+    certificate_offer:
+      offering.product.type === ProductType.CERTIFICATE ? CourseCertificateOffer.PAID : null,
+    offer: offering.product.type === ProductType.CREDENTIAL ? CourseOffer.PAID : null,
+    certificate_price:
+      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,
+    certificate_discounted_price: offering.product.certificate_discounted_price || null,
+    certificate_discount: offering.product.certificate_discount || null,
   };
 };
 
@@ -59,6 +76,15 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   effort: course.effort,
   categories: course.categories,
   organizations: course.organizations,
+  price: course.price,
+  price_currency: course.price_currency,
+  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,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
@@ -91,16 +117,25 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     },
     state: course.state,
     nb_course_runs: course.course_run_ids.length,
+    price: null,
+    price_currency: 'EUR',
+    certificate_offer: null,
+    offer: null,
+    certificate_price: null,
+    discounted_price: null,
+    discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 };
 
 export const getCourseGlimpseProps = (
-  course: RichieCourse | (JoanieCourse | CourseProductRelationLight),
+  course: RichieCourse | (JoanieCourse | OfferingLight),
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
-  if (isCourseProductRelation(course)) {
-    return getCourseGlimpsePropsFromCourseProductRelation(course, intl!, organizationId);
+  if (isOffering(course)) {
+    return getCourseGlimpsePropsFromOffering(course, intl!, organizationId);
   }
 
   if (isRichieCourse(course)) {

frontend/js/components/CourseGlimpseList/utils.ts

@@ -1,10 +1,10 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelationLight, CourseListItem as JoanieCourse } from 'types/Joanie';
+import { OfferingLight, CourseListItem as JoanieCourse } from 'types/Joanie';
 import { Course as RichieCourse } from 'types/Course';
 import { CourseGlimpseCourse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 
 export const getCourseGlimpseListProps = (
-  courses: RichieCourse[] | (JoanieCourse | CourseProductRelationLight)[],
+  courses: RichieCourse[] | (JoanieCourse | OfferingLight)[],
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse[] => {

frontend/js/components/Icon/index.tsx

@@ -64,6 +64,11 @@ export enum IconTypeEnum {
   TWITTER = 'icon-twitter',
   UNIVERSITY = 'icon-univerity',
   WARNING = 'icon-warning',
+  VIDEO_PLAY = 'icon-video-play',
+  OFFER_PAID = 'icon-offer-paid',
+  OFFER_FREE = 'icon-offer-free',
+  OFFER_PARTIALLY_FREE = 'icon-offer-partially_free',
+  OFFER_SUBSCRIPTION = 'icon-offer-subscription',
 }
 
 export const Icon = ({ name, title, className = '', size = 'medium', ...props }: Props) => {

frontend/js/components/OpenEdxFullNameForm/index.spec.tsx

@@ -15,7 +15,7 @@ import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { AppWrapperProps } from 'utils/test/wrappers/types';
-import { expectBannerError } from 'utils/test/expectBanner';
+import { expectAlertError, expectAlertWarning, expectNoAlertWarning } from 'utils/test/expectAlert';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -71,7 +71,7 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
   });
 
@@ -93,7 +93,7 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue(user.full_name);
   });
 
@@ -119,15 +119,25 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
+    await expectAlertWarning(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
+
     // Submit the form
     await act(async () => {
       await expect(submitCallbacks.openEdxFullNameForm()).rejects.not.toBeUndefined();
     });
 
     screen.getByText('This field is required.');
+    await expectNoAlertWarning(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
+    await expectAlertError(
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
+    );
   });
 
   it('should require a value with at least 3 chars to submit the form', async () => {
@@ -152,7 +162,7 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
     const eventHandler = userEvent.setup();
@@ -189,7 +199,7 @@ describe('OpenEdxFullNameForm', () => {
 
     expect(submitCallbacks.hasOwnProperty('openEdxFullNameForm')).toBe(true);
 
-    const $input = await screen.findByRole('textbox', { name: 'Full name' });
+    const $input = await screen.findByRole('textbox', { name: 'First name and last name' });
     expect($input).toHaveValue('');
 
     const eventHandler = userEvent.setup();
@@ -224,6 +234,6 @@ describe('OpenEdxFullNameForm', () => {
       wrapper: Wrapper,
     });
 
-    await expectBannerError('An error occurred while fetching your profile. Please retry later.');
+    await expectAlertError('An error occurred while fetching your profile. Please retry later.');
   });
 });