richie-education 3.4.1-dev3 → 3.5.1-dev1

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderSeatInfo.spec.tsx

@@ -0,0 +1,114 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { BatchOrderReadFactory, BatchOrderSeatFactory } from 'utils/test/factories/joanie';
+import { BatchOrderState } from 'types/Joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { BatchOrderSeatInfo } from './BatchOrderSeatInfo';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<BatchOrderSeatInfo />', () => {
+  setupJoanieSession();
+
+  const paginatedResponse = (results: object[], count?: number) => ({
+    results,
+    count: count ?? results.length,
+    next: null,
+    previous: null,
+  });
+
+  it('renders enrollment progress and seat list, and searches by query param', async () => {
+    const ownedSeat = BatchOrderSeatFactory({ owner_name: 'Alice Martin' }).one();
+    const voucherSeat = BatchOrderSeatFactory().one();
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 10,
+      seats_owned: 1,
+      seats_to_own: 9,
+    }).one();
+
+    fetchMock.get(
+      `begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`,
+      paginatedResponse([ownedSeat, voucherSeat], 10),
+    );
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    expect(await screen.findByText('1/10 enrolled participants')).toBeVisible();
+    expect(await screen.findByText('Alice Martin')).toBeVisible();
+    expect(await screen.findByText(voucherSeat.voucher!)).toBeVisible();
+
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox'), 'Alice');
+
+    await waitFor(() => {
+      const urls = fetchMock
+        .calls(`begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`)
+        .map(([url]) => url);
+      expect(urls.some((url) => url.includes('query=Alice'))).toBe(true);
+    });
+  });
+
+  it('loads more seats when clicking the load more button', async () => {
+    const firstPage = BatchOrderSeatFactory().many(10);
+    const secondPage = BatchOrderSeatFactory().many(5);
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 15,
+      seats_owned: 15,
+      seats_to_own: 0,
+    }).one();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=1&page_size=10`,
+      { results: firstPage, count: 15, next: 'next-url', previous: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=2&page_size=10`,
+      { results: secondPage, count: 15, next: null, previous: 'prev-url' },
+    );
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    expect(await screen.findByText(firstPage[0].owner_name ?? firstPage[0].voucher!)).toBeVisible();
+    expect(screen.queryByText(secondPage[0].owner_name ?? secondPage[0].voucher!)).toBeNull();
+    expect(screen.getByRole('button', { name: 'Load 5 more' })).toBeVisible();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Load 5 more' }));
+
+    expect(
+      await screen.findByText(secondPage[0].owner_name ?? secondPage[0].voucher!),
+    ).toBeVisible();
+    expect(screen.queryByText('Load 5 more')).toBeNull();
+    expect(screen.getByText(firstPage[0].owner_name ?? firstPage[0].voucher!)).toBeVisible();
+  });
+
+  it('shows an error banner when the seats API fails', async () => {
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 10,
+      seats_owned: 1,
+      seats_to_own: 9,
+    }).one();
+
+    fetchMock.get(`begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`, {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+    });
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    await expectBannerError('An error occurred while fetching resources. Please retry later.');
+  });
+});

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderSeatInfo.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, Input } from '@openfun/cunningham-react';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import Banner, { BannerType } from 'components/Banner';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { useBatchOrderSeats } from 'hooks/useBatchOrder';
+import DownloadBatchOrderSeatsButton from 'components/DownloadBatchOrderSeatsButton';
+import { BatchOrderRead, BatchOrderSeat } from 'types/Joanie';
+import { batchOrderSeatInfoMessages } from './batchOrderSeatInfoMessages';
+
+const messages = defineMessages({
+  enrollmentManagement: {
+    id: 'batchOrder.enrollmentManagement.title',
+    description: 'Title for enrollment management section',
+    defaultMessage: 'Enrollment',
+  },
+});
+
+const ITEMS_PER_PAGE = 10;
+
+interface BatchOrderSeatInfoProps {
+  batchOrder: BatchOrderRead;
+}
+
+export const BatchOrderSeatInfo = ({ batchOrder }: BatchOrderSeatInfoProps) => {
+  const intl = useIntl();
+  const [query, setQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [allSeats, setAllSeats] = useState<BatchOrderSeat[]>([]);
+
+  const seatsOwnedCount = batchOrder.seats_owned ?? 0;
+
+  const {
+    items: seats,
+    meta,
+    states,
+  } = useBatchOrderSeats(
+    {
+      batch_order_id: batchOrder.id,
+      query: query || undefined,
+      page,
+      page_size: ITEMS_PER_PAGE,
+    },
+    { enabled: !!batchOrder.id },
+  );
+
+  useEffect(() => {
+    if (page === 1) {
+      setAllSeats(seats);
+    } else if (seats.length > 0) {
+      setAllSeats((prev) => [...prev, ...seats]);
+    }
+  }, [seats]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [query]);
+
+  const totalCount = meta?.pagination?.count ?? 0;
+  const remainingCount = Math.min(ITEMS_PER_PAGE, totalCount - allSeats.length);
+
+  if (
+    !batchOrder.nb_seats ||
+    batchOrder.seats_owned === undefined ||
+    batchOrder.seats_to_own === undefined
+  ) {
+    return null;
+  }
+
+  return (
+    <DashboardSubItem
+      title={intl.formatMessage(messages.enrollmentManagement)}
+      footer={
+        <div className="content">
+          <div className="enrollment-progress">
+            <span className="dashboard-item__label">
+              {intl.formatMessage(batchOrderSeatInfoMessages.enrolledParticipants, {
+                seats_owned: seatsOwnedCount,
+                nb_seats: batchOrder.nb_seats,
+              })}
+            </span>
+            <div className="enrollment-progress__bar">
+              <div
+                className="enrollment-progress__bar__fill"
+                style={{ width: `${(seatsOwnedCount / batchOrder.nb_seats) * 100}%` }}
+              />
+            </div>
+          </div>
+          {states.error && <Banner message={states.error} type={BannerType.ERROR} />}
+          <div className="enrollment-nested-section__content">
+            <Input
+              className="enrollment-search"
+              label={intl.formatMessage(batchOrderSeatInfoMessages.searchPlaceholder)}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              rightIcon={<Icon name={IconTypeEnum.MAGNIFYING_GLASS} size="small" />}
+            />
+            {allSeats.length === 0 && query ? (
+              <FormattedMessage {...batchOrderSeatInfoMessages.noResults} />
+            ) : (
+              <>
+                <ul className="enrollment-list">
+                  {allSeats.map((seat) => (
+                    <li key={seat.id}>{seat.owner_name ?? seat.voucher}</li>
+                  ))}
+                </ul>
+                <div className="enrollment-actions">
+                  {remainingCount > 0 && (
+                    <Button
+                      className="enrollment-load-more"
+                      color="brand"
+                      variant="secondary"
+                      size="small"
+                      onClick={() => setPage((p) => p + 1)}
+                      disabled={states.fetching}
+                    >
+                      {intl.formatMessage(batchOrderSeatInfoMessages.loadMore, {
+                        count: remainingCount,
+                      })}
+                    </Button>
+                  )}
+                  <div>
+                    <DownloadBatchOrderSeatsButton
+                      batchOrderId={batchOrder.id}
+                      productTitle={batchOrder.offering?.product.title ?? ''}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      }
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/DashboardBatchOrderSubItems.tsx

@@ -1,8 +1,10 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { PaymentMethod } from 'components/PaymentInterfaces/types';
-import { BatchOrderRead } from 'types/Joanie';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
 import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
+import { BatchOrderSeatInfo } from './BatchOrderSeatInfo';
+import { BatchOrderAgreementInfo } from './BatchOrderAgreementInfo';
 
 const messages = defineMessages({
   stepCompany: {
@@ -30,9 +32,10 @@ const messages = defineMessages({
     description: 'section with details about the person responsible for signing the quote',
     defaultMessage: 'Signatory',
   },
-  seats: {
-    id: 'batchOrder.seats',
-    description: 'Text displayed for seats value in batch order',
+  labelSeats: {
+    id: 'batchOrder.label.seats',
+    description:
+      'Label displayed for the seats count field in the batch order participants sub-item',
     defaultMessage: 'Seats',
   },
   labelName: {
@@ -144,6 +147,12 @@ const DashboardItemField = ({
 export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchOrderRead }) => {
   const intl = useIntl();
 
+  const displaySeatsInfo =
+    batchOrder.state === BatchOrderState.COMPLETED &&
+    !!batchOrder.nb_seats &&
+    batchOrder.seats_owned !== undefined &&
+    batchOrder.seats_to_own !== undefined;
+
   const items = [
     <DashboardSubItem
       key="company"
@@ -235,7 +244,7 @@ export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchO
       footer={
         <div className="content">
           <DashboardItemField
-            label={<FormattedMessage {...messages.seats} />}
+            label={<FormattedMessage {...messages.labelSeats} />}
             value={batchOrder.nb_seats}
           />
         </div>
@@ -312,5 +321,13 @@ export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchO
     );
   }
 
+  if (batchOrder.contract_id) {
+    items.push(<BatchOrderAgreementInfo key="agreement" batchOrder={batchOrder} />);
+  }
+
+  if (displaySeatsInfo) {
+    items.push(<BatchOrderSeatInfo key="enrollment-management" batchOrder={batchOrder} />);
+  }
+
   return <DashboardSubItemsList subItems={items} />;
 };

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/batchOrderSeatInfoMessages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export const batchOrderSeatInfoMessages = defineMessages({
+  enrolledParticipants: {
+    id: 'batchOrder.enrollmentManagement.enrolledParticipants',
+    description: 'Progress label showing enrolled participants out of total seats',
+    defaultMessage: '{seats_owned}/{nb_seats} enrolled participants',
+  },
+  searchPlaceholder: {
+    id: 'batchOrder.enrollmentManagement.searchPlaceholder',
+    description: 'Placeholder for the seat search input (student name or voucher)',
+    defaultMessage: 'Student name',
+  },
+  noResults: {
+    id: 'batchOrder.enrollmentManagement.noResults',
+    description: 'Message shown when the student search returns no results',
+    defaultMessage: 'No student matches your search.',
+  },
+  loadMore: {
+    id: 'batchOrder.enrollmentManagement.loadMore',
+    description: 'Button to load more seats',
+    defaultMessage: 'Load {count} more',
+  },
+});

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/index.tsx

@@ -14,7 +14,12 @@ const messages = defineMessages({
   seats: {
     id: 'batchOrder.seats',
     description: 'Text displayed for seats value in batch order',
-    defaultMessage: 'Seats',
+    defaultMessage: '{nb_seats} seats',
+  },
+  seatsCount: {
+    id: 'batchOrder.seatsCount',
+    description: 'Text displayed for seats count in batch order (owned / total)',
+    defaultMessage: '{seats_owned}/{nb_seats} seats',
   },
   [BatchOrderState.DRAFT]: {
     id: 'batchOrder.status.draft',
@@ -136,8 +141,16 @@ export const DashboardItemBatchOrder = ({
               {batchOrder.nb_seats && (
                 <div className="dashboard-item__block__information">
                   <Icon name={IconTypeEnum.GROUPS} size="small" />
-                  <span>{batchOrder.nb_seats}</span>
-                  <span>{intl.formatMessage(messages.seats)}</span>
+                  <span>
+                    {batchOrder.seats_owned
+                      ? intl.formatMessage(messages.seatsCount, {
+                          seats_owned: batchOrder.seats_owned,
+                          nb_seats: batchOrder.nb_seats,
+                        })
+                      : intl.formatMessage(messages.seats, {
+                          nb_seats: batchOrder.nb_seats,
+                        })}
+                  </span>
                 </div>
               )}
               {batchOrder.payment_method && (

package/js/widgets/Dashboard/components/DashboardItem/_styles.scss

@@ -162,12 +162,16 @@
       padding: 0.5rem 1rem;
       font-size: 0.8rem;
       display: flex;
-      gap: 1rem;
-      align-items: center;
+      flex-direction: column;
+      gap: 0.5rem;
     }
   }
 }
 
+.dashboard-item__action-button {
+  align-self: flex-end;
+}
+
 .dashboard-item__course-enrolling {
   &__infos {
     align-items: center;

package/js/widgets/Dashboard/utils/teacherDashboardPaths.tsx

@@ -82,7 +82,7 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.learnerList.label',
     description: "Label to display the organization product's learner list view.",
-    defaultMessage: 'Learners',
+    defaultMessage: 'Buyers',
   },
   [TeacherDashboardPaths.COURSE]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.label',
@@ -102,7 +102,7 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.learnerList.label',
     description: "Label to display the product's learner list view.",
-    defaultMessage: 'Learners',
+    defaultMessage: 'Buyers',
   },
   [TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.contracts.label',

package/js/widgets/Slider/components/SlidePanel.tsx

@@ -53,7 +53,19 @@ const SlidePanel = ({
         })}
       >
         <strong className="slide__title">
-          <span>{slides[activeSlideIndex].title}</span>
+          <span>
+            {slides[activeSlideIndex].link_url ? (
+              <a
+                href={slides[activeSlideIndex].link_url}
+                target={slides[activeSlideIndex].link_open_blank ? '_blank' : '_self'}
+                rel="noopener noreferrer"
+              >
+                {slides[activeSlideIndex].title}
+              </a>
+            ) : (
+              slides[activeSlideIndex].title
+            )}
+          </span>
         </strong>
         {hasSlideContent && (
           <div

package/js/widgets/Slider/index.spec.tsx

@@ -71,13 +71,11 @@ describe('<Slider />', () => {
     // Check if all slides are rendered
     mockSlides.forEach((slide) => {
       expect(screen.getByRole('img', { name: slide.title })).toBeInTheDocument();
-      // Check if the link is rendered
-      const link = screen.queryByRole('link', { name: slide.title });
       if (slide.link_url) {
-        expect(link).toHaveAttribute('href', slide.link_url);
-        expect(link).toBeInTheDocument();
+        const links = screen.getAllByRole('link', { name: slide.title });
+        links.forEach((link) => expect(link).toHaveAttribute('href', slide.link_url));
       } else {
-        expect(link).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: slide.title })).not.toBeInTheDocument();
       }
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.4.1-dev3",
+  "version": "3.5.1-dev1",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -57,9 +57,6 @@
     "@openfun/cunningham-tokens": "3.0.0",
     "@sentry/browser": "10.40.0",
     "@sentry/types": "10.40.0",
-    "@storybook/addon-links": "10.2.13",
-    "@storybook/react": "10.2.13",
-    "@storybook/react-webpack5": "10.2.13",
     "@tanstack/query-core": "5.90.20",
     "@tanstack/query-sync-storage-persister": "5.90.23",
     "@tanstack/react-query": "5.90.21",
@@ -105,7 +102,6 @@
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-storybook": "10.2.13",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.1.0",
@@ -132,11 +128,10 @@
     "react-router": "7.12.0",
     "sass": "1.97.3",
     "source-map-loader": "5.0.0",
-    "storybook": "10.2.13",
     "tsconfig-paths-webpack-plugin": "4.2.0",
     "typescript": "5.9.3",
     "uuid": "13.0.0",
-    "webpack": "5.104.1",
+    "webpack": "5.109.2",
     "webpack-cli": "6.0.1",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
@@ -158,6 +153,11 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-webpack5-compiler-babel": "4.0.0"
+    "@storybook/addon-webpack5-compiler-babel": "4.0.0",
+    "@storybook/addon-links": "10.2.13",
+    "@storybook/react": "10.2.13",
+    "@storybook/react-webpack5": "10.2.13",
+    "eslint-plugin-storybook": "10.2.13",
+    "storybook": "10.2.13"
   }
 }

package/scss/components/templates/richie/slider/_slider.scss

@@ -201,6 +201,16 @@ $r-slider-content-line-clamp: 4 !default;
   font-weight: $r-slider-title-fontweight;
   font-family: $r-slider-title-fontfamily;
 
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      opacity: 0.8;
+    }
+  }
+
   & > span {
     display: inline-block;
     transform: translateY(0%);

package/scss/objects/_dashboard.scss

@@ -101,3 +101,87 @@
     padding: 1rem;
   }
 }
+
+.enrollment-progress {
+  display: flex;
+  align-items: center;
+  gap: rem-calc(8px);
+  margin-bottom: rem-calc(8px);
+
+  &__bar {
+    flex: 1;
+    height: rem-calc(8px);
+    background-color: var(--c--globals--colors--gray-100);
+    border-radius: rem-calc(4px);
+    overflow: hidden;
+
+    &__fill {
+      height: 100%;
+      background-color: var(--c--theme--colors--primary-500);
+      transition: width 0.3s ease;
+      animation: progress-grow 2s ease-out forwards;
+
+      @keyframes progress-grow {
+        from {
+          width: 0;
+        }
+      }
+    }
+  }
+}
+
+.enrollment-nested-section__content {
+  display: flex;
+  flex-direction: column;
+  gap: rem-calc(4px);
+  font-size: rem-calc(13px);
+
+  .enrollment-search {
+    width: 50%;
+    margin-bottom: 0.5rem;
+  }
+
+  .enrollment-list {
+    list-style: disc inside;
+    padding-left: 0;
+    margin: 0;
+
+    li {
+      margin-bottom: rem-calc(4px);
+    }
+  }
+}
+
+.enrollment-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: rem-calc(8px);
+  margin-top: rem-calc(8px);
+}
+
+.enrollment-load-more {
+  width: fit-content;
+  padding: rem-calc(4px) rem-calc(12px);
+}
+
+.enrollment-pagination-wrapper {
+  margin-top: rem-calc(8px);
+
+  .pagination {
+    margin: 0;
+    padding: 0;
+    justify-content: flex-start;
+
+    &__list {
+      margin: 0;
+      padding: 0;
+      gap: rem-calc(4px);
+    }
+
+    &__item {
+      transform: scale(0.9);
+      transform-origin: center;
+    }
+  }
+}