richie-education 3.4.0 → 3.4.1-dev13

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

@@ -0,0 +1,132 @@
+import fetchMock from 'fetch-mock';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { useDownloadBatchOrderSeats } from 'hooks/useDownloadBatchOrderSeats/index';
+import { handle } from 'utils/errors/handle';
+import { SessionProvider } from 'contexts/SessionContext';
+import { Deferred } from 'utils/test/deferred';
+import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+
+jest.mock('utils/errors/handle');
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+const mockHandle = handle as jest.MockedFn<typeof handle>;
+
+describe('useDownloadBatchOrderSeats', () => {
+  beforeEach(() => {
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+  });
+
+  beforeAll(() => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn();
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    HTMLAnchorElement.prototype.click = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>{children}</SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  it('downloads the batch order seats CSV', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/batch-orders/${batchOrder.id}/seats-export/`;
+    const deferred = new Deferred();
+    fetchMock.get(DOWNLOAD_URL, deferred.promise);
+
+    const { result } = renderHook(() => useDownloadBatchOrderSeats(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+    expect(result.current.loading).toBe(false);
+
+    act(() => {
+      result.current.download(batchOrder.id);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['last_name,first_name,email']),
+      headers: {
+        'Content-Type': 'text/csv',
+      },
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+      expect(result.current.loading).toBe(false);
+    });
+
+    fireEvent.blur(window);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles an error if seats export request fails', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/batch-orders/${batchOrder.id}/seats-export/`;
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
+
+    const { result } = renderHook(() => useDownloadBatchOrderSeats(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    expect(mockHandle).not.toHaveBeenCalled();
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      result.current.download(batchOrder.id);
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      expect(mockHandle).toHaveBeenNthCalledWith(1, new Error('Unauthorized'));
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+      expect(result.current.loading).toBe(false);
+    });
+  });
+});

package/js/hooks/useDownloadBatchOrderSeats/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
+
+export const useDownloadBatchOrderSeats = () => {
+  const [loading, setLoading] = useState(false);
+  const API = useJoanieApi();
+
+  return {
+    download: async (batchOrderId: string, filename?: string) => {
+      setLoading(true);
+      try {
+        await browserDownloadFromBlob(
+          () => API.user.batchOrders.seats_export(batchOrderId),
+          false,
+          filename,
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    loading,
+  };
+};

package/js/pages/DashboardBatchOrderLayout/index.spec.tsx

@@ -2,7 +2,11 @@ import { findByRole, render, screen, waitFor } from '@testing-library/react';
 import { generatePath } from 'react-router';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import {
+  AgreementFactory,
+  BatchOrderReadFactory,
+  BatchOrderSeatFactory,
+} from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { expectUrlMatchLocationDisplayed } from 'utils/test/expectUrlMatchLocationDisplayed';
@@ -49,8 +53,21 @@ describe('<DashboardBatchOrderLayout />', () => {
 
   it('renders sidebar', async () => {
     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/?page=1&page_size=10`,
+      {
+        results: seats,
+        count: seats.length,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${batchOrder.organization.id}/agreements/${batchOrder.contract_id}/`,
+      AgreementFactory().one(),
+    );
 
     render(
       WrapperWithDashboard(

package/js/pages/TeacherDashboardOrganizationQuotes/BatchOrderSeatInfoQuote.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { 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';
+import { batchOrderSeatInfoMessages } from 'widgets/Dashboard/components/DashboardItem/BatchOrder/batchOrderSeatInfoMessages';
+
+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">
+      <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>
+              {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>
+      </div>
+    </div>
+  );
+};

package/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;
+  }
+}

package/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -50,7 +50,7 @@ describe('full process for the organization quotes dashboard', () => {
       batch_order: {
         state: BatchOrderState.QUOTED,
         payment_method: PaymentMethod.CARD_PAYMENT,
-        available_actions: { next_action: 'confirm_quote' },
+        available_actions: { next_action: 'confirm_quote', download_quote: true },
       },
       organization_signed_on: undefined,
     }).one();
@@ -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: {

package/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/', []);
@@ -158,7 +162,7 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
     const quoteQuoted = OrganizationQuoteFactory({
       batch_order: {
         state: BatchOrderState.QUOTED,
-        available_actions: { next_action: 'confirm_quote' },
+        available_actions: { next_action: 'confirm_quote', download_quote: true },
       },
     }).one();
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);

package/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: {
@@ -360,35 +361,40 @@ const TeacherDashboardOrganizationQuotes = () => {
     );
   };
 
+  const renderDownloadButton = (quote: OrganizationQuote) => {
+    const batchOrder = quote.batch_order;
+
+    return (
+      <Button
+        size="small"
+        color="brand"
+        variant="secondary"
+        className="mr-2"
+        onClick={() => handleDownloadQuote(quote.id)}
+        icon={<span className="material-icons">download</span>}
+        disabled={!abilities?.download_quote || !batchOrder.available_actions.download_quote}
+      >
+        {intl.formatMessage(messages.downloadQuote)}
+      </Button>
+    );
+  };
+
   const renderActionButton = (quote: OrganizationQuote) => {
     const batchOrder = quote.batch_order;
     const state = batchOrder?.state;
     const paymentMethod = batchOrder?.payment_method;
 
-    if (!batchOrder || !state || !paymentMethod || state === BatchOrderState.COMPLETED) return null;
-
-    const confirmQuoteButtons = (
-      <div>
-        <Button
-          size="small"
-          color="brand"
-          variant="secondary"
-          className="mr-2"
-          onClick={() => handleDownloadQuote(quote.id)}
-          icon={<span className="material-icons">download</span>}
-          disabled={!abilities?.download_quote}
-        >
-          {intl.formatMessage(messages.downloadQuote)}
-        </Button>
-        <Button
-          size="small"
-          onClick={() => handleOpenConfirm(quote.id)}
-          icon={<span className="material-icons">check_circle</span>}
-          disabled={!abilities?.confirm_quote}
-        >
-          {intl.formatMessage(messages.confirmQuote)}
-        </Button>
-      </div>
+    if (!batchOrder || !state || !paymentMethod) return null;
+
+    const confirmQuoteButton = (
+      <Button
+        size="small"
+        onClick={() => handleOpenConfirm(quote.id)}
+        icon={<span className="material-icons">check_circle</span>}
+        disabled={!abilities?.confirm_quote}
+      >
+        {intl.formatMessage(messages.confirmQuote)}
+      </Button>
     );
 
     const confirmPurchaseOrderButton = (
@@ -430,7 +436,7 @@ const TeacherDashboardOrganizationQuotes = () => {
 
     switch (batchOrder.available_actions?.next_action) {
       case 'confirm_quote':
-        return confirmQuoteButtons;
+        return confirmQuoteButton;
       case 'confirm_purchase_order':
         return confirmPurchaseOrderButton;
       case 'confirm_bank_transfer':
@@ -485,7 +491,10 @@ const TeacherDashboardOrganizationQuotes = () => {
                   </Badge>
                 )}
               </div>
-              <div className="dashboard__quote__header__action">{renderActionButton(quote)}</div>
+              <div className="dashboard__quote__header__action">
+                {renderDownloadButton(quote)}
+                {renderActionButton(quote)}
+              </div>
             </div>
           }
           defaultExpanded={false}
@@ -534,6 +543,9 @@ const TeacherDashboardOrganizationQuotes = () => {
               </div>
             )}
           </div>
+          {quote.batch_order.state === BatchOrderState.COMPLETED && (
+            <BatchOrderSeatInfoQuote batchOrder={quote.batch_order} />
+          )}
         </DashboardCard>
       ))}
       <Pagination {...pagination} />

package/js/types/Joanie.ts

@@ -567,6 +567,14 @@ export interface BatchOrderRead {
   funding_entity?: string;
   funding_amount?: number;
   offering: OfferingBatchOrder;
+  seats_to_own?: number;
+  seats_owned?: number;
+}
+
+export interface BatchOrderSeat {
+  id: string;
+  owner_name: string | null;
+  voucher: string | null;
 }
 
 export interface Relation {
@@ -585,7 +593,8 @@ export type BatchOrderAction =
   | 'confirm_quote'
   | 'confirm_purchase_order'
   | 'confirm_bank_transfer'
-  | 'submit_for_signature';
+  | 'submit_for_signature'
+  | 'download_quote';
 
 export type BatchOrderAvailableActions = {
   [K in BatchOrderAction]: boolean;
@@ -603,6 +612,8 @@ export interface BatchOrderQuote {
   payment_method: PaymentMethod;
   contract_submitted: boolean;
   nb_seats: number;
+  seats_to_own?: number;
+  seats_owned?: number;
   available_actions: BatchOrderAvailableActions;
 }
 
@@ -741,6 +752,10 @@ export interface OfferingQueryFilters extends PaginatedResourceQuery {
 export interface BatchOrderQueryFilters extends PaginatedResourceQuery {
   id?: BatchOrderRead['id'];
 }
+export interface BatchOrderSeatsQueryFilters extends PaginatedResourceQuery {
+  batch_order_id?: string;
+  query?: string;
+}
 export interface OrganizationQuoteQueryFilters extends PaginatedResourceQuery {
   organization_id?: Organization['id'];
   batch_order_id?: BatchOrder['id'];
@@ -834,6 +849,10 @@ interface APIUser {
     submit_for_payment: {
       create(filters: ResourcesQuery): Promise<any>;
     };
+    seats: {
+      get(filters?: BatchOrderSeatsQueryFilters): Promise<PaginatedResponse<BatchOrderSeat>>;
+    };
+    seats_export(id: string): Promise<File>;
   };
   certificates: {
     download(id: string): Promise<File>;
@@ -947,6 +966,7 @@ export interface API {
       ): ContractResourceQuery extends { id: string }
         ? Promise<Nullable<Agreement>>
         : Promise<PaginatedResponse<Agreement>>;
+      download(filters: { organization_id: string; id: string }): Promise<File>;
     };
   };
   courseRuns: {

package/js/utils/download.ts

@@ -5,11 +5,13 @@ import { handle } from './errors/handle';
  *
  * @param downloadFunction, an api promise that return a File
  * @param newWindow, does it open in a new window or not
+ * @param filename, optional filename override; if provided, takes precedence over file.name
  * @returns boolean, true for success
  */
 export const browserDownloadFromBlob = async (
   downloadFunction: () => Promise<File>,
   newWindow: boolean = false,
+  filename?: string,
 ) => {
   try {
     const file = await downloadFunction();
@@ -24,7 +26,7 @@ export const browserDownloadFromBlob = async (
 
     const $link = document.createElement('a');
     $link.href = url;
-    $link.download = file.name;
+    $link.download = filename || file.name;
 
     const revokeObject = () => {
       // eslint-disable-next-line compat/compat

package/js/utils/test/factories/joanie.ts

@@ -46,6 +46,7 @@ import {
   BatchOrderQuote,
   Relation,
   Agreement,
+  BatchOrderSeat,
 } from 'types/Joanie';
 import { Payment, PaymentMethod, PaymentProviders } from 'components/PaymentInterfaces/types';
 import { CourseStateFactory } from 'utils/test/factories/richie';
@@ -214,12 +215,15 @@ 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,
       confirm_bank_transfer: false,
       submit_for_signature: false,
+      download_quote: false,
       next_action: null,
     },
   };
@@ -551,6 +555,8 @@ export const BatchOrderReadFactory = factory((): BatchOrderRead => {
     funding_entity: faker.company.name(),
     funding_amount: faker.number.int({ min: 100, max: 10000 }),
     offering: OfferingBatchOrderFactory().one(),
+    seats_owned: faker.number.int({ min: 1, max: 200 }),
+    seats_to_own: faker.number.int({ min: 1, max: 200 }),
   };
 });
 
@@ -678,3 +684,11 @@ export const SaleTunnelContextFactory = factory(
     setPaymentMode: noop,
   }),
 );
+
+export const BatchOrderSeatFactory = factory((): BatchOrderSeat => {
+  return {
+    id: faker.string.uuid(),
+    owner_name: null,
+    voucher: faker.string.alphanumeric(10),
+  };
+});