richie-education 2.29.3-dev48 → 2.29.3-dev52

package/js/hooks/useCourseRunOrder/index.tsx

@@ -21,7 +21,7 @@ const useCourseRunOrder = (courseRun: CourseRun) => {
     product_id: resourceLinkResources?.product,
   });
 
-  return { item: orders.length > 0 ? orders[0] : undefined, states: { fetching, isFetched } };
+  return { item: orders?.[0], states: { fetching, isFetched } };
 };
 
 export default useCourseRunOrder;

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

@@ -145,7 +145,9 @@ describe('useCreditCards', () => {
       responseDeferred.resolve({});
     });
 
-    expect(result.current.states.tokenizing).toBe(false);
+    await waitFor(() => {
+      expect(result.current.states.tokenizing).toBe(false);
+    });
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -995,10 +995,7 @@ describe('<DashboardItemOrder/>', () => {
     order.payment_schedule![1].state = PaymentScheduleState.REFUSED;
 
     const formatPrice = (price: number, currency: string) =>
-      new Intl.NumberFormat('en', {
-        currency,
-        style: 'currency',
-      }).format(price);
+      new Intl.NumberFormat('en', { currency, style: 'currency' }).format(price);
 
     const { product } = mockCourseProductWithOrder(order);
     fetchMock.get(
@@ -1038,12 +1035,10 @@ describe('<DashboardItemOrder/>', () => {
 
     // Click on pay button.
     const payButton = screen.getByTestId('order-payment-retry-modal-submit-button');
-    expect(payButton.innerHTML.replace('&nbsp;', ' ')).toEqual(
+    expect(payButton).toHaveTextContent(
       'Pay ' +
-        formatPrice(failedInstallment.amount, failedInstallment.currency).replace(
-          /(\u202F|\u00a0)/g,
-          ' ',
-        ),
+        formatPrice(failedInstallment.amount, failedInstallment.currency).replaceAll(/\s/g, ' '),
+      { normalizeWhitespace: true },
     );
     await user.click(payButton);
     // Pay via mocked payment interface
@@ -1054,7 +1049,7 @@ describe('<DashboardItemOrder/>', () => {
     expect(screen.queryByText('Retry payment')).not.toBeInTheDocument();
 
     // Success modal is shown, close it.
-    screen.getByText('Payment successful');
+    await screen.findByText('Payment successful');
     screen.getByText('The payment was successful');
     const okButton = screen.getByRole('button', { name: 'Ok' });
     await user.click(okButton);

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.product.spec.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -11,12 +12,12 @@ import { render } from 'utils/test/render';
 import {
   CourseLightFactory,
   CredentialOrderFactory,
-  EnrollmentFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { ACTIVE_ORDER_STATES, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
 import CourseRunItemWithEnrollment from '.';
 
 jest.mock('utils/context', () => ({
@@ -61,10 +62,9 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 
-  it('should not render enrollment information when user is not enrolled to the course run', async () => {
+  it('should not render enrollment information when user has no order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
-    const order = CredentialOrderFactory().one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
       title: 'run',
@@ -73,6 +73,39 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
     }).one();
 
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
+      mockPaginatedResponse([], 0, false),
+    );
+
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
+    });
+    await expectNoSpinner();
+
+    // Only dates should be displayed.
+    screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
+    expect(fetchMock.called()).toBe(true);
+    const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
+    expect(link).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
+  });
+
+  it('should not render enrollment information when user has no active order for the product', async () => {
+    const course = CourseLightFactory().one();
+    const product = ProductFactory().one();
+    const user = UserFactory().one();
+    const order = CredentialOrderFactory({
+      state: faker.helpers.arrayElement(PURCHASABLE_ORDER_STATES),
+    }).one();
+    const courseRun = CourseRunFactory({
+      title: 'run',
+      start: new Date('2023-01-01').toISOString(),
+      end: new Date('2023-12-31').toISOString(),
+      resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
+    }).one();
+
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
       mockPaginatedResponse([order], 1, false),
@@ -84,20 +117,19 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     });
     await expectNoSpinner();
 
-    // Only dates should have been displayed.
+    // Only dates should be displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
     const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
-    expect(link).toBeInTheDocument();
-    expect(link.href).toBe(`https://localhost/en/dashboard/courses/orders/${order.id}`);
+    expect(link).not.toBeInTheDocument();
     expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
   });
 
-  it('should render enrollment information when user is enrolled to the course run', async () => {
+  it('should render enrollment information when user has an active order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
     const order = CredentialOrderFactory({
-      target_enrollments: EnrollmentFactory({ is_active: true }).many(1),
+      state: faker.helpers.arrayElement(ACTIVE_ORDER_STATES),
     }).one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
@@ -121,7 +153,6 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       expect(screen.queryByText('loading...')).not.toBeInTheDocument();
     });
 
-    // Only dates should have been displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
 

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

@@ -8,6 +8,8 @@ import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 import useCourseRunOrder from 'hooks/useCourseRunOrder';
 import { Spinner } from 'components/Spinner';
+import { OrderHelper } from 'utils/OrderHelper';
+import { extractResourceMetadata } from 'api/lms/joanie';
 
 const messages = defineMessages({
   goToCourse: {
@@ -33,6 +35,8 @@ type Props = {
 
 const CourseRunItemWithEnrollment = ({ item }: Props) => {
   const intl = useIntl();
+  const resourceLinkResources = extractResourceMetadata(item.resource_link);
+  const isProduct = !!(resourceLinkResources?.course && resourceLinkResources?.product);
   const {
     item: order,
     states: { isFetched },
@@ -43,14 +47,12 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   const { enrollmentIsActive: courseRunEnrollmentIsActive } = useCourseEnrollment(
     item.resource_link,
-    isFetched && !order,
+    !isProduct,
   );
 
-  // user is enroll to a product if any of the product's target course have a active enrollment
-  const productEnrollmentIsActive = order?.target_enrollments.some((enrollment) => {
-    return enrollment.is_active;
-  });
-  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || productEnrollmentIsActive);
+  // user is enrolled to a product if there is an active order for the product
+  const orderIsActive = OrderHelper.isActive(order);
+  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || orderIsActive);
 
   if (!isFetched) {
     return <Spinner />;
@@ -58,7 +60,7 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   return (
     <>
-      {enrollmentIsActive || !!order ? (
+      {enrollmentIsActive ? (
         // eslint-disable-next-line jsx-a11y/control-has-associated-label
         <a href={courseUrl} title={intl.formatMessage(messages.goToCourse)}>
           <CourseRunItem item={item} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.29.3-dev48",
+  "version": "2.29.3-dev52",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -51,7 +51,7 @@
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "2.9.4",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.32.0",
+    "@sentry/browser": "8.33.0",
     "@sentry/types": "8.32.0",
     "@storybook/addon-actions": "8.3.4",
     "@storybook/addon-essentials": "8.3.4",

package/scss/colors/_theme.scss

@@ -128,6 +128,18 @@ $r-theme: (
     cta-color: r-color('firebrick6'),
     cta-border: r-color('white'),
   ),
+  compacted-banner: (
+    title-color: r-color('charcoal'),
+    title-alt-color: r-color('firebrick6'),
+    content-color: r-color('black'),
+    search-input-background: rgba(r-color('white'), 0.7),
+    search-btn-background: r-color('firebrick6'),
+    search-icon-fill: r-color('white'),
+    cta-variant-from: rgba(r-color('white'), 0.8),
+    cta-variant-to: rgba(r-color('white'), 0.8),
+    cta-color: r-color('firebrick6'),
+    cta-border: r-color('white'),
+  ),
   section-plugin: (
     title-emphased-color: r-color('firebrick6'),
   ),

package/scss/components/_content.scss

@@ -28,6 +28,20 @@ body {
       background-size: 100% 100%;
     }
   }
+
+  // Apply the top padding behavior with topbar over mode only on the first child which
+  // is the only variant that can be exposed to issue with topbar over
+  .compacted-banner:first-child {
+    .compacted-banner__inner {
+      @include media-breakpoint-up(lg) {
+        @if $r-topbar-height {
+          padding: $r-topbar-height 0 1rem;
+        } @else {
+          padding: 1rem 0 1rem;
+        }
+      }
+    }
+  }
 }
 
 // Container relative to some modal components

package/scss/components/_index.scss

@@ -61,6 +61,7 @@
 @import './templates/courses/plugins/licence_plugin';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
+@import './templates/richie/large_banner/compacted_banner';
 @import './templates/richie/nesteditem/nesteditem';
 @import './templates/richie/glimpse/glimpse';
 

package/scss/components/templates/richie/large_banner/_compacted_banner.scss

@@ -0,0 +1,149 @@
+// A compact banner without image contents
+// Opposed to 'hero-intro' this variant delegates the top padding for topbar in 'over'
+// mode in content component
+//
+.compacted-banner {
+  position: relative;
+  padding: 0;
+
+  &__inner {
+    padding: 1rem 0;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+
+  &__body {
+    @include make-container();
+    @include make-container-max-widths();
+    padding: 1rem;
+    text-align: center;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      padding: 2rem;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  // NOTE: Force disabling of hardcoded hero title class from some already save
+  // contents. Sadly we can not disable the huge font size
+  .hero-intro__title {
+    margin-bottom: 1rem !important;
+    width: auto;
+    color: inherit;
+
+    strong {
+      color: inherit;
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Apply the color+weight behavior with 'strong' element alike in
+  // 'hero-intro__title' but naturally on title elements without any class
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: r-theme-val(compacted-banner, title-color);
+    margin-bottom: 0.5em;
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Implement again the 'hero-intro__title' equivalent behavior
+  &__title {
+    @include responsive-spacer('margin-bottom', 1);
+    @include font-size($extra-font-size);
+    color: r-theme-val(compacted-banner, title-color);
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  &__content {
+    @include font-size($h5-font-size);
+    color: r-theme-val(compacted-banner, content-color);
+  }
+
+  &__search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    .richie-react--root-search-suggest-field {
+      @include sv-flex(1, 0, 100%);
+      position: relative;
+
+      @include media-breakpoint-up(lg) {
+        @include sv-flex(1, 0, 320px);
+      }
+
+      .react-autosuggest__container {
+        margin-bottom: 0;
+      }
+
+      input {
+        background: r-theme-val(compacted-banner, search-input-background);
+      }
+
+      .search-input {
+        &__btn {
+          background: r-theme-val(compacted-banner, search-btn-background);
+          border-top-right-radius: 3rem;
+          border-bottom-right-radius: 3rem;
+
+          &__icon {
+            fill: r-theme-val(compacted-banner, search-icon-fill);
+          }
+        }
+      }
+    }
+  }
+
+  &__cta {
+    @include sv-flex(0, 0, auto);
+    @include button-size(
+      $btn-padding-y,
+      $btn-padding-x,
+      $btn-font-size,
+      $btn-line-height,
+      $btn-border-radius
+    );
+    @include button-variant(
+      r-theme-val(compacted-banner, cta-variant-from),
+      r-theme-val(compacted-banner, cta-variant-to)
+    );
+    margin: 1.2rem 0 0;
+    font-size: $font-size-base;
+    color: r-theme-val(compacted-banner, cta-color);
+    border-radius: 2rem;
+    @if r-theme-val(compacted-banner, cta-border) {
+      border: 1px solid r-theme-val(compacted-banner, cta-border);
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-top: 0;
+      @include responsive-spacer('margin-left', 0, $breakpoints: ('lg': 3));
+    }
+
+    &:after {
+      content: '→';
+      margin-left: 1rem;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}