richie-education 2.25.0-b2.dev68 → 2.25.0-b2.dev69

package/js/api/joanie.ts

@@ -23,13 +23,21 @@ interface CheckStatusOptions {
   ignoredErrorStatus: (number | HttpStatusCode)[];
 }
 
+export async function getFileFromResponse(response: Response): Promise<File> {
+  const filenameRegex = /filename="(.*)";/;
+  const dispositionHeader = response.headers.get('Content-Disposition');
+  const matches = dispositionHeader?.match(filenameRegex);
+
+  return new File([await response.blob()], matches ? matches[1] : '');
+}
+
 export function getResponseBody(response: Response) {
   if (response.headers.get('Content-Type') === 'application/json') {
     return response.json();
   }
   const fileType = ['application/pdf', 'application/zip'];
   if (fileType.includes(response.headers.get('Content-Type') || '')) {
-    return response.blob();
+    return new Promise((resolve) => resolve(response));
   }
   return response.text();
 }
@@ -321,7 +329,7 @@ const API = (): Joanie.API => {
             let url = ROUTES.user.orders.invoice.download.replace(':id', order_id);
             url += `?${queryString.stringify({ reference: invoice_reference })}`;
 
-            return fetchWithJWT(url).then(checkStatus);
+            return fetchWithJWT(url).then(checkStatus).then(getFileFromResponse);
           },
         },
         submit_for_signature: async (id) =>
@@ -346,7 +354,9 @@ const API = (): Joanie.API => {
       },
       certificates: {
         download: async (id: string): Promise<File> =>
-          fetchWithJWT(ROUTES.user.certificates.download.replace(':id', id)).then(checkStatus),
+          fetchWithJWT(ROUTES.user.certificates.download.replace(':id', id))
+            .then(checkStatus)
+            .then(getFileFromResponse),
         get: async (filters) => {
           return fetchWithJWT(buildApiUrl(ROUTES.user.certificates.get, filters)).then(checkStatus);
         },
@@ -382,7 +392,9 @@ const API = (): Joanie.API => {
         download(id: string): Promise<any> {
           return fetchWithJWT(ROUTES.user.contracts.download.replace(':id', id), {
             method: 'GET',
-          }).then(checkStatus);
+          })
+            .then(checkStatus)
+            .then(getFileFromResponse);
         },
         zip_archive: {
           check: async (id) => {
@@ -399,7 +411,9 @@ const API = (): Joanie.API => {
           get: async (id) => {
             return fetchWithJWT(ROUTES.user.contracts.zip_archive.get.replace(':id', id), {
               method: 'GET',
-            }).then(checkStatus);
+            })
+              .then(checkStatus)
+              .then(getFileFromResponse);
           },
         },
       },

package/js/components/DownloadContractButton/index.spec.tsx

@@ -10,6 +10,7 @@ import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/fac
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { alert } from 'utils/indirection/window';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import DownloadContractButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -65,7 +66,16 @@ describe('<DownloadContractButton/>', () => {
     const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
       order.contract!.id
     }/download/`;
-    fetchMock.get(DOWNLOAD_URL, 'contract content');
+
+    fetchMock.get(DOWNLOAD_URL, () => ({
+      status: HttpStatusCode.OK,
+      body: new Blob(['contract content']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    }));
+    const expectedFile = new File(['contract content'], 'test.pdf');
 
     render(
       <Wrapper>
@@ -88,9 +98,9 @@ describe('<DownloadContractButton/>', () => {
     // eslint-disable-next-line compat/compat
     expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
     // eslint-disable-next-line compat/compat
-    expect(URL.createObjectURL).toHaveBeenCalledWith('contract content');
+    expect(URL.createObjectURL).toHaveBeenCalledWith(expectedFile);
     expect(window.open).toHaveBeenCalledTimes(1);
-    expect(window.open).toHaveBeenCalledWith('contract content');
+    expect(window.open).toHaveBeenCalledWith(expectedFile);
   });
 
   it('fails downloading the contract and shows an error', async () => {
@@ -109,7 +119,10 @@ describe('<DownloadContractButton/>', () => {
     const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
       order.contract!.id
     }/download/`;
-    fetchMock.get(DOWNLOAD_URL, 500);
+    fetchMock.get(DOWNLOAD_URL, {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Bad request',
+    });
 
     render(
       <Wrapper>

package/js/components/DownloadContractButton/index.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { handle } from 'utils/errors/handle';
 import { Contract } from 'types/Joanie';
 import { alert } from 'utils/indirection/window';
+import { browserDownloadFromBlob } from 'utils/download';
 
 const messages = defineMessages({
   contractDownloadActionLabel: {
@@ -29,16 +29,11 @@ const DownloadContractButton = ({ contract, className }: DownloadContractButtonP
   const intl = useIntl();
 
   const downloadContract = async () => {
-    try {
-      const blob = await api.user.contracts.download(contract!.id);
-      // eslint-disable-next-line compat/compat
-      const file = window.URL.createObjectURL(blob);
-      window.open(file);
-
-      // eslint-disable-next-line compat/compat
-      URL.revokeObjectURL(file);
-    } catch (e) {
-      handle(e);
+    const success = await browserDownloadFromBlob(
+      () => api.user.contracts.download(contract!.id),
+      true,
+    );
+    if (!success) {
       alert(intl.formatMessage(messages.contractDownloadError));
     }
   };

package/js/hooks/useContractArchive/index.download.spec.tsx

@@ -71,7 +71,14 @@ describe('useContractArchive', () => {
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
 
     result.current.methods.get(archiveId);
-    deferred.resolve(HttpStatusCode.OK);
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);

package/js/hooks/useContractArchive/index.ts

@@ -1,4 +1,5 @@
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { handle } from 'utils/errors/handle';
 
@@ -17,25 +18,6 @@ const extractArchiveId = (url: string): string => {
   return match[0];
 };
 
-// TODO: should be factorized with useDownloadCertificate
-// and maybe DownloadContractButton
-const buildArchiveFromBlob = (fileName: string, blob: Blob) => {
-  // eslint-disable-next-line compat/compat
-  const url = URL.createObjectURL(blob);
-  const $link = document.createElement('a');
-  $link.href = url;
-  $link.download = fileName;
-
-  const revokeObject = () => {
-    // eslint-disable-next-line compat/compat
-    URL.revokeObjectURL(url);
-    window.removeEventListener('blur', revokeObject);
-  };
-
-  window.addEventListener('blur', revokeObject);
-  $link.click();
-};
-
 const useContractArchive = () => {
   const api = useJoanieApi();
   return {
@@ -57,17 +39,16 @@ const useContractArchive = () => {
         return false;
       },
       get: async (archiveId: string): Promise<true | void> => {
-        try {
-          const response = api.user.contracts.zip_archive.get(archiveId);
-          buildArchiveFromBlob('contracts.zip', await response);
-          return true;
-        } catch (error) {
-          handle(error);
-        }
-
         // FIXME: two thing could happen here with HttpStatusCode.NOT_FOUND response:
         // * nothing found because the zip is generating.
         // * nothing found because the zip doesn't and will never exist.
+        const success = await browserDownloadFromBlob(() =>
+          api.user.contracts.zip_archive.get(archiveId),
+        );
+
+        if (success) {
+          return true;
+        }
       },
       create: async (organizationId: string): Promise<string> => {
         const response = await api.user.contracts.zip_archive.create({

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

@@ -2,7 +2,7 @@ import fetchMock from 'fetch-mock';
 import { PropsWithChildren } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
-import { fireEvent, renderHook, waitFor } from '@testing-library/react';
+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 { useDownloadCertificate } from 'hooks/useDownloadCertificate/index';
@@ -72,9 +72,19 @@ describe('useDownloadCertificate', () => {
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
     expect(result.current.loading).toBe(false);
 
-    result.current.download(certificate.id);
-    await waitFor(() => expect(result.current.loading).toBe(true));
-    deferred.resolve(HttpStatusCode.OK);
+    act(() => {
+      result.current.download(certificate.id);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
@@ -109,7 +119,9 @@ describe('useDownloadCertificate', () => {
     // eslint-disable-next-line compat/compat
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
 
-    await result.current.download(certificate.id);
+    act(() => {
+      result.current.download(certificate.id);
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);

package/js/hooks/useDownloadCertificate/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { handle } from 'utils/errors/handle';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
 
 export const useDownloadCertificate = () => {
   const [loading, setLoading] = useState(false);
@@ -9,25 +9,7 @@ export const useDownloadCertificate = () => {
   return {
     download: async (certificateId: string) => {
       setLoading(true);
-      try {
-        const $link = document.createElement('a');
-        const file = await API.user.certificates.download(certificateId);
-        // eslint-disable-next-line compat/compat
-        const url = URL.createObjectURL(file);
-        $link.href = url;
-        $link.download = '';
-
-        const revokeObject = () => {
-          // eslint-disable-next-line compat/compat
-          URL.revokeObjectURL(url);
-          window.removeEventListener('blur', revokeObject);
-        };
-
-        window.addEventListener('blur', revokeObject);
-        $link.click();
-      } catch (error) {
-        handle(error);
-      }
+      await browserDownloadFromBlob(() => API.user.certificates.download(certificateId));
       setLoading(false);
     },
     loading,

package/js/utils/download.ts

@@ -0,0 +1,43 @@
+import { handle } from './errors/handle';
+
+/**
+ * browserDownloadFromBlob handle direct download of a file api response.
+ *
+ * @param downloadFunction, an api promise that return a File
+ * @param newWindow, does it open in a new window or not
+ * @returns boolean, true for success
+ */
+export const browserDownloadFromBlob = async (
+  downloadFunction: () => Promise<File>,
+  newWindow: boolean = false,
+) => {
+  try {
+    const file = await downloadFunction();
+
+    // eslint-disable-next-line compat/compat
+    const url = URL.createObjectURL(file);
+
+    if (newWindow) {
+      window.open(url);
+      return;
+    }
+
+    const $link = document.createElement('a');
+    $link.href = url;
+    $link.download = file.name;
+
+    const revokeObject = () => {
+      // eslint-disable-next-line compat/compat
+      URL.revokeObjectURL(url);
+      window.removeEventListener('blur', revokeObject);
+    };
+
+    window.addEventListener('blur', revokeObject);
+    $link.click();
+    return true;
+  } catch (error) {
+    handle(error);
+  }
+
+  return false;
+};

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.spec.tsx

@@ -48,9 +48,13 @@ describe.each([
   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();
   });
 
   beforeEach(() => {
+    // SessionProvider queries
     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/', []);
@@ -88,10 +92,14 @@ describe.each([
       order: OrderFactory().one(),
     }).one();
 
-    fetchMock.get(
-      `https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`,
-      HttpStatusCode.OK,
-    );
+    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, () => ({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    }));
 
     render(
       <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCertificateItem/index.spec.tsx

@@ -91,7 +91,14 @@ describe('CourseProductCertificateItem', () => {
     // When user clicks on "Download" button, the certificate should be downloaded
     fetchMock.get(
       `https://joanie.test/api/v1.0/certificates/${order.certificate_id}/download/`,
-      HttpStatusCode.OK,
+      () => ({
+        status: HttpStatusCode.OK,
+        body: new Blob(['test']),
+        headers: {
+          'Content-Disposition': 'attachment; filename="test.pdf";',
+          'Content-Type': 'application/pdf',
+        },
+      }),
     );
 
     fireEvent.click($button);

package/package.json

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