richie-education 2.34.1-dev39 → 2.34.1-dev44

package/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -1,8 +1,8 @@
-import { defineMessages, useIntl } from 'react-intl';
-
+import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CommonDataProps } from 'types/commonDataProps';
 import { CourseGlimpseCourse } from 'components/CourseGlimpse/index';
+import { CourseOffer } from 'types/Course';
 
 const messages = defineMessages({
   dateIconAlt: {
@@ -10,8 +10,46 @@ const messages = defineMessages({
     description: 'Course date logo alternative text for screen reader users',
     id: 'components.CourseGlimpseFooter.dateIconAlt',
   },
+  enrollmentOfferIconFreeAlt: {
+    defaultMessage: 'The entire course can be completed for free.',
+    description: 'Course offers free alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconFreeAlt',
+  },
+  enrollmentOfferIconPartiallyFreeAlt: {
+    defaultMessage: 'More than half of the course is for free.',
+    description: 'Course offers partially free alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconPartiallyFreeAlt',
+  },
+  enrollmentOfferIconPaidAlt: {
+    defaultMessage: 'Course requires a payment.',
+    description: 'Course offers paid alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconPaidAlt',
+  },
+  enrollmentOfferIconSubscriptionAlt: {
+    defaultMessage: 'Course requires to be a subscriber or a paid member.',
+    description: 'Course offers subscription alternative text',
+    id: 'components.CourseGlimpseFooter.enrollmentOfferIconSubscriptionAlt',
+  },
+  certificateOfferIconAlt: {
+    defaultMessage: 'The course offers a certification.',
+    description: 'Course certificate offer alternative text',
+    id: 'components.CourseGlimpseFooter.certificateOfferIconAlt',
+  },
 });
 
+const courseOfferMessages = {
+  [CourseOffer.FREE]: messages.enrollmentOfferIconFreeAlt,
+  [CourseOffer.PARTIALLY_FREE]: messages.enrollmentOfferIconPartiallyFreeAlt,
+  [CourseOffer.PAID]: messages.enrollmentOfferIconPaidAlt,
+  [CourseOffer.SUBSCRIPTION]: messages.enrollmentOfferIconSubscriptionAlt,
+};
+
+type OfferIconType =
+  | IconTypeEnum.OFFER_SUBSCRIPTION
+  | IconTypeEnum.OFFER_PAID
+  | IconTypeEnum.OFFER_PARTIALLY_FREE
+  | IconTypeEnum.OFFER_FREE;
+
 /**
  * <CourseGlimpseFooter />.
  * This is spun off from <CourseGlimpse /> to allow easier override through webpack.
@@ -20,19 +58,52 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
   course,
 }) => {
   const intl = useIntl();
+  const offer = course.offer ?? CourseOffer.FREE;
+  const certificateOffer = course.certificate_offer ?? null;
+  const hasCertificateOffer = certificateOffer !== null;
+  const hasEnrollmentOffer = offer !== CourseOffer.FREE;
+  const offerIcon = `icon-offer-${offer}` as OfferIconType;
+  const offerCertificateIcon = hasCertificateOffer && IconTypeEnum.SCHOOL;
+  const offerPrice = hasEnrollmentOffer && course.price;
+
   return (
     <div className="course-glimpse-footer">
-      <div className="course-glimpse-footer__date">
-        <Icon name={IconTypeEnum.CALENDAR} title={intl.formatMessage(messages.dateIconAlt)} />
-        {course.state.text.charAt(0).toUpperCase() +
-          course.state.text.substring(1) +
-          (course.state.datetime
-            ? ` ${intl.formatDate(new Date(course.state.datetime!), {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-              })}`
-            : '')}
+      <div className="course-glimpse-footer__column course-glimpse-footer__date">
+        <Icon
+          name={IconTypeEnum.CALENDAR}
+          title={intl.formatMessage(messages.dateIconAlt)}
+          size="small"
+        />
+        <span>
+          {course.state.text.charAt(0).toUpperCase() +
+            course.state.text.substring(1) +
+            (course.state.datetime
+              ? ` ${intl.formatDate(new Date(course.state.datetime!), {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}`
+              : '')}
+        </span>
+      </div>
+      <div className="course-glimpse-footer__column course-glimpse-footer__price">
+        {offerCertificateIcon && (
+          <Icon
+            className="offer-certificate__icon"
+            name={offerCertificateIcon}
+            title={intl.formatMessage(messages.certificateOfferIconAlt)}
+          />
+        )}
+        <Icon
+          className="offer__icon"
+          name={offerIcon}
+          title={intl.formatMessage(courseOfferMessages[offer])}
+        />
+        {offerPrice && (
+          <span className="offer__price">
+            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+          </span>
+        )}
       </div>
     </div>
   );

package/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,11 @@ 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',
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -63,6 +69,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 +84,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>
+    // Matches on 'Starting on March 14, 2019', date is wrapped with intl <span>
     screen.getByLabelText('Course date');
-    screen.getByText('Starting on Mar 14, 2019');
+    screen.getByText('Starting on March 14, 2019');
 
     // Check course logo
     const courseGlipseMedia = container.getElementsByClassName('course-glimpse__media');
@@ -97,6 +108,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: 'The course offers a certification.' });
+
+    // Check offer information
+    const offerIcon = within(container).getByRole('img', { name: 'Course requires a 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 +137,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 +167,57 @@ describe('widgets/Search/components/CourseGlimpse', () => {
       'course-glimpse__metadata--code',
     );
   });
+
+  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: 'The entire course can be completed 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, 'The entire course can be completed for free.'],
+    [CourseOffer.PARTIALLY_FREE, 'More than half of the course is for free.'],
+    [CourseOffer.PAID, 'Course requires a payment.'],
+    [CourseOffer.SUBSCRIPTION, 'Course requires to be a subscriber or a paid member.'],
+  ])('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}`);
+  });
 });

package/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,11 @@ 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;
 }
 
 export interface CourseGlimpseProps {
@@ -71,91 +78,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>
   );
 };

package/js/components/CourseGlimpse/utils.ts

@@ -1,10 +1,16 @@
 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,
+  ProductType,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
@@ -40,6 +46,20 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
     product_id: courseProductRelation.product.id,
     course_route: courseRoute,
     state: courseProductRelation.product.state,
+    certificate_offer:
+      courseProductRelation.product.type === ProductType.CERTIFICATE
+        ? CourseCertificateOffer.PAID
+        : null,
+    offer: courseProductRelation.product.type === ProductType.CREDENTIAL ? CourseOffer.PAID : null,
+    certificate_price:
+      courseProductRelation.product.type === ProductType.CERTIFICATE
+        ? courseProductRelation.product.price
+        : null,
+    price:
+      courseProductRelation.product.type === ProductType.CREDENTIAL
+        ? courseProductRelation.product.price
+        : null,
+    price_currency: courseProductRelation.product.price_currency,
   };
 };
 
@@ -59,6 +79,11 @@ 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,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
@@ -91,6 +116,11 @@ 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,
   };
 };
 

package/js/components/Icon/index.tsx

@@ -65,6 +65,10 @@ export enum IconTypeEnum {
   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) => {

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/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';
 
@@ -239,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/package.json

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

package/scss/colors/_theme.scss

@@ -217,8 +217,8 @@ $r-theme: (
   ),
   course-glimpse: (
     card-background: r-color('white'),
-    base-shadow: 0 0 6px r-color('light-grey'),
-    base-hover-shadow: 0 0 6px r-color('battleship-grey'),
+    base-shadow: 0 0 8px #00000033,
+    base-hover-shadow: 0 0 4px #00000055,
     cta-background: r-color('battleship-grey'),
     empty-color: r-color('slate-grey'),
     icon-shadow: (
@@ -232,8 +232,15 @@ $r-theme: (
     organization-color: r-color('firebrick6'),
     code-color: r-color('battleship-grey'),
     svg-icon-fill: r-color('white'),
-    footer: $battleship-grey-scheme,
     organization-shadow: 0 0 6px r-color('light-grey'),
+    footer: $battleship-grey-scheme,
+    footer-offer-paid: $indianred3-scheme,
+    footer-offer-subscription: $indianred3-scheme,
+    footer-offer-partially_free: $indianred3-scheme,
+    footer-offer-certificate: null,
+    offer-icon-visibility: visible,
+    offer-certificate-icon-visibility: visible,
+    offer-price-visibility: visible,
   ),
   category-badges: (
     primary-item: $indianred3-scheme,

package/scss/objects/_course_glimpses.scss

@@ -57,10 +57,8 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
 
   position: relative;
   margin: $r-course-glimpse-gutter;
-  border-radius: $border-radius-lg;
-  box-shadow: r-theme-val(course-glimpse, base-shadow);
+
   min-width: 16rem;
-  overflow: hidden;
 
   @include media-breakpoint-up(sm) {
     @include sv-flex(1, 0, calc(50% - #{$r-course-glimpse-gutter * 2}));
@@ -83,8 +81,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     pointer-events: auto;
   }
 
-  &:hover,
-  &:focus-within {
+  &__body {
+    box-shadow: r-theme-val(course-glimpse, base-shadow);
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+    transition: box-shadow 0.5s $r-ease-out;
+    z-index: 1;
+  }
+
+  &:hover &__body,
+  &:focus-within &__body {
     color: inherit;
     text-decoration: none;
     border: 0;
@@ -149,6 +155,7 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   &__content {
     font-size: 0.9rem;
     color: r-theme-val(course-glimpse, content-color);
+    background: map-get(r-theme-val(course-glimpse, footer), 'background');
   }
 
   &__wrapper {
@@ -156,6 +163,9 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     display: flex;
     flex-direction: column;
     position: relative;
+    color: r-theme-val(course-glimpse, card-background);
+    border-radius: 0 0 $border-radius-lg $border-radius-lg;
+    background-color: r-theme-val(course-glimpse, card-background);
   }
 
   &__title,
@@ -322,9 +332,26 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   border-bottom-left-radius: $border-radius-lg;
   border-bottom-right-radius: $border-radius-lg;
   font-size: 0.7rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 0;
+  transition: transform 0.25s $r-ease-out;
 
-  &__date {
-    @include sv-flex(1, 0, auto);
+  &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -15px;
+    height: 30px;
+    left: 0;
+    right: 0;
+    @include r-button-colors(r-theme-val(course-glimpse, footer), $apply-border: true);
+    z-index: -1;
+  }
+
+  &__column {
+    @include sv-flex(0, 130px, auto);
     display: flex;
     margin: 0;
     padding: 0.45rem 0;
@@ -335,7 +362,54 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     .icon {
       margin-right: 0.5rem;
     }
+
+    span {
+      display: inline-block;
+      max-width: 15ch;
+      font-variant-numeric: tabular-nums;
+    }
   }
+
+  &__price {
+    .offer-certificate__icon {
+      $visibility: r-theme-val(course-glimpse, offer-certificate-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+    .offer__icon {
+      $visibility: r-theme-val(course-glimpse, offer-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+
+    .offer__icon {
+      margin-right: 0;
+      & + .offer__price {
+        margin-left: 0.25rem;
+      }
+    }
+
+    .offer__price {
+      $visibility: r-theme-val(course-glimpse, offer-price-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+      // Align vertically the price with the icon
+      margin-top: calc(1ex - 1cap);
+    }
+  }
+}
+
+.course-glimpse:hover .course-glimpse-footer,
+.course-glimpse:hover .course-glimpse__large-footer,
+.course-glimpse:focus-within .course-glimpse-footer,
+.course-glimpse:focus-within .course-glimpse__large-footer {
+  transform: translateY(4px);
 }
 
 //
@@ -346,3 +420,25 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     @include sv-flex(1, 0, calc(33.33333% - #{$r-course-glimpse-gutter * 2}));
   }
 }
+
+// Course Glimpse Variant according to the offer
+$offer-schemes: (
+  certificate: r-theme-val(course-glimpse, footer-offer-certificate),
+  free: r-theme-val(course-glimpse, footer-offer-free),
+  paid: r-theme-val(course-glimpse, footer-offer-paid),
+  partially_free: r-theme-val(course-glimpse, footer-offer-partially_free),
+  subscription: r-theme-val(course-glimpse, footer-offer-subscription),
+);
+
+@each $offer, $scheme in $offer-schemes {
+  @if $scheme != null {
+    .course-glimpse--offer-#{$offer} {
+      .course-glimpse-footer {
+        @include r-button-colors($scheme, $apply-border: true);
+        &:after {
+          background: map-get($scheme, 'background');
+        }
+      }
+    }
+  }
+}