✨(frontend) add enrollement to organization dashboard

wip commit will be edited

Author: liamls

src/frontend/js/pages/DashboardBatchOrderLayout/index.spec.tsx

@@ -51,7 +51,15 @@ describe('<DashboardBatchOrderLayout />', () => {
     const batchOrder = BatchOrderReadFactory().one();
     const seats = BatchOrderSeatFactory().many(2);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`, seats);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=1&page_size=10`,
+      {
+        results: seats,
+        count: seats.length,
+        previous: null,
+        next: null,
+      },
+    );
 
     render(
       WrapperWithDashboard(

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/BatchOrderSeatInfoQuote.tsx

@@ -0,0 +1,140 @@
+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 { useBatchOrderSeats } from 'hooks/useBatchOrder';
+import { BatchOrderQuote, BatchOrderSeat } from 'types/Joanie';
+
+const messages = defineMessages({
+  enrollmentManagement: {
+    id: 'batchOrder.enrollmentManagement.title',
+    description: 'Title for enrollment management section',
+    defaultMessage: 'Enrollment',
+  },
+  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',
+  },
+});
+
+const ITEMS_PER_PAGE = 10;
+
+export const BatchOrderSeatInfoQuote = ({ batchOrder }: { batchOrder: BatchOrderQuote }) => {
+  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 (
+    <div className="dashboard__quote__enrollment">
+      <h6 className="dashboard__quote__enrollment__title">
+        {intl.formatMessage(messages.enrollmentManagement)}
+      </h6>
+      <div className="content">
+        <div className="enrollment-progress">
+          <span className="dashboard-item__label">
+            {intl.formatMessage(messages.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(messages.searchPlaceholder)}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            rightIcon={<Icon name={IconTypeEnum.MAGNIFYING_GLASS} size="small" />}
+          />
+          {allSeats.length === 0 && query ? (
+            <FormattedMessage {...messages.noResults} />
+          ) : (
+            <>
+              <ul className="enrollment-list">
+                {allSeats.map((seat) => (
+                  <li key={seat.id}>{seat.owner_name ?? seat.voucher}</li>
+                ))}
+              </ul>
+              {remainingCount > 0 && (
+                <Button
+                  className="enrollment-load-more"
+                  color="neutral"
+                  variant="secondary"
+                  size="small"
+                  onClick={() => setPage((p) => p + 1)}
+                  disabled={states.fetching}
+                >
+                  {intl.formatMessage(messages.loadMore, { count: remainingCount })}
+                </Button>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/_styles.scss

@@ -38,3 +38,20 @@
   display: flex;
   justify-content: center;
 }
+
+.dashboard__quote__enrollment {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid r-theme-val(dashboard-card, base-color);
+
+  &__title {
+    margin: 0 0 0.5rem;
+  }
+
+  .content {
+    font-size: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -214,7 +214,6 @@ describe('full process for the organization quotes dashboard', () => {
       },
     }).one();
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
-
     const quoteQuoted = OrganizationQuoteFactory({
       batch_order: {
         state: BatchOrderState.QUOTED,
@@ -272,6 +271,10 @@ describe('full process for the organization quotes dashboard', () => {
       `https://joanie.endpoint/api/v1.0/organizations/1/submit-for-signature-batch-order/`,
       200,
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${quoteCompleted.batch_order.id}/seats/?page=1&page_size=10`,
+      { results: [], count: 0, previous: null, next: null },
+    );
 
     render(<TeacherDashboardOrganizationQuotes />, {
       routerOptions: {

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/index.spec.tsx

@@ -28,7 +28,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
   });
 
   it('should render a list of quotes for an organization', async () => {
-    const quoteList = OrganizationQuoteFactory().many(1);
+    const quoteList = OrganizationQuoteFactory({
+      batch_order: { state: BatchOrderState.QUOTED },
+    }).many(1);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
@@ -85,7 +87,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
   });
 
   it('should paginate', async () => {
-    const quoteList = OrganizationQuoteFactory().many(30);
+    const quoteList = OrganizationQuoteFactory({
+      batch_order: { state: BatchOrderState.QUOTED },
+    }).many(30);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/index.tsx

@@ -14,6 +14,7 @@ import Badge from 'components/Badge';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { browserDownloadFromBlob } from 'utils/download';
 import { Spinner } from 'components/Spinner';
+import { BatchOrderSeatInfoQuote } from './BatchOrderSeatInfoQuote';
 
 const messages = defineMessages({
   loading: {
@@ -534,6 +535,9 @@ const TeacherDashboardOrganizationQuotes = () => {
               </div>
             )}
           </div>
+          {quote.batch_order.state === BatchOrderState.COMPLETED && (
+            <BatchOrderSeatInfoQuote batchOrder={quote.batch_order} />
+          )}
         </DashboardCard>
       ))}
       <Pagination {...pagination} />

src/frontend/js/types/Joanie.ts

@@ -611,6 +611,8 @@ export interface BatchOrderQuote {
   payment_method: PaymentMethod;
   contract_submitted: boolean;
   nb_seats: number;
+  seats_to_own?: number;
+  seats_owned?: number;
   available_actions: BatchOrderAvailableActions;
 }
 

src/frontend/js/utils/test/factories/joanie.ts

@@ -215,7 +215,9 @@ export const BatchOrderQuoteFactory = factory((): BatchOrderQuote => {
     relation: RelationFactory().one(),
     payment_method: faker.helpers.arrayElement(Object.values(PaymentMethod)),
     contract_submitted: faker.datatype.boolean(),
-    nb_seats: faker.number.int({ min: 1, max: 100 }),
+    nb_seats: faker.number.int({ min: 10, max: 100 }),
+    seats_owned: faker.number.int({ min: 0, max: 10 }),
+    seats_to_own: faker.number.int({ min: 90, max: 100 }),
     available_actions: {
       confirm_quote: false,
       confirm_purchase_order: false,