richie-education 2.25.0-b2.dev142 → 2.25.0-b2.dev145

package/js/api/joanie.ts

@@ -28,7 +28,9 @@ export async function getFileFromResponse(response: Response): Promise<File> {
   const dispositionHeader = response.headers.get('Content-Disposition');
   const matches = dispositionHeader?.match(filenameRegex);
 
-  return new File([await response.blob()], matches ? matches[1] : '');
+  return new File([await response.blob()], matches ? matches[1] : '', {
+    type: response.headers.get('Content-Type') || '',
+  });
 }
 
 export function getResponseBody(response: Response) {

package/js/types/Joanie.ts

@@ -98,12 +98,20 @@ export interface CertificateDefinition {
   description: string;
 }
 
-export interface Certificate {
+export type Certificate = {
   id: string;
   issued_on: string;
   certificate_definition: CertificateDefinition;
-  order: NestedCertificateOrder | NestedCredentialOrder;
-}
+} & (
+  | {
+      order: NestedCertificateOrder | NestedCredentialOrder;
+      enrollment: null;
+    }
+  | {
+      enrollment: EnrollmentLight;
+      order: null;
+    }
+);
 
 // - Organization
 export interface OrganizationLight {

package/js/utils/CertificateHelper/index.spec.ts

@@ -0,0 +1,47 @@
+import {
+  CertificateFactory,
+  CertificateOrderFactory,
+  CourseLightFactory,
+  CourseRunFactory,
+  CredentialOrderFactory,
+  EnrollmentLightFactory,
+} from 'utils/test/factories/joanie';
+import { CertificateHelper } from '.';
+
+describe('CertificateHelper', () => {
+  it.each([undefined, null])(
+    'should return undefined if the certificate is not defined',
+    (emptyValue) => {
+      expect(CertificateHelper.getCourse(emptyValue)).toBeUndefined();
+    },
+  );
+
+  it.each([
+    CertificateFactory({
+      enrollment: EnrollmentLightFactory({
+        course_run: CourseRunFactory({
+          course: CourseLightFactory({ title: 'Course 1' }).one(),
+        }).one(),
+      }).one(),
+      order: null,
+    }).one(),
+    CertificateFactory({
+      enrollment: null,
+      order: CredentialOrderFactory({
+        course: CourseLightFactory({ title: 'Course 1' }).one(),
+      }).one(),
+    }).one(),
+    CertificateFactory({
+      enrollment: null,
+      order: CertificateOrderFactory({
+        enrollment: EnrollmentLightFactory({
+          course_run: CourseRunFactory({
+            course: CourseLightFactory({ title: 'Course 1' }).one(),
+          }).one(),
+        }).one(),
+      }).one(),
+    }).one(),
+  ])('should return the course from the certificate linked to ', (certificate) => {
+    expect(CertificateHelper.getCourse(certificate)?.title).toEqual('Course 1');
+  });
+});

package/js/utils/CertificateHelper/index.ts

@@ -0,0 +1,19 @@
+import { Certificate } from 'types/Joanie';
+import { Nullable } from 'types/utils';
+
+export class CertificateHelper {
+  /**
+   * Get the course from a Certificate according to its type.
+   * Indeed, a Certificate can be linked to an Order or an Enrollment.
+   */
+  static getCourse(certificate?: Nullable<Certificate>) {
+    if (!certificate) return undefined;
+
+    if (certificate.order) {
+      if (certificate.order.course) return certificate.order.course;
+      else return certificate.order.enrollment.course_run.course;
+    }
+
+    return certificate.enrollment.course_run.course;
+  }
+}

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

@@ -184,6 +184,7 @@ export const CertificateFactory = factory((): Certificate => {
     id: faker.string.uuid(),
     certificate_definition: CertificationDefinitionFactory().one(),
     order: NestedCredentialOrderFactory().one(),
+    enrollment: null,
     issued_on: faker.date.past().toISOString(),
   };
 });

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

@@ -12,6 +12,7 @@ import { DashboardItemCertificate } from 'widgets/Dashboard/components/Dashboard
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
   CertificateFactory,
+  EnrollmentLightFactory,
   NestedCertificateOrderFactory,
   NestedCredentialOrderFactory,
 } from 'utils/test/factories/joanie';
@@ -27,14 +28,27 @@ jest.mock('utils/context', () => ({
 
 describe.each([
   {
-    label: 'link to a credential order',
-    OrderFactory: NestedCredentialOrderFactory,
+    // Link to a credential order
+    overrideFactory: () => ({
+      order: NestedCredentialOrderFactory().one(),
+      enrollment: null,
+    }),
   },
   {
-    label: 'link to a certificate order',
-    OrderFactory: NestedCertificateOrderFactory,
+    // Link to a certificate order
+    overrideFactory: () => ({
+      order: NestedCertificateOrderFactory().one(),
+      enrollment: null,
+    }),
   },
-])('<DashboardCertificate/> $label', ({ label, OrderFactory }) => {
+  {
+    // Link to an enrollment
+    overrideFactory: () => ({
+      order: null,
+      enrollment: EnrollmentLightFactory().one(),
+    }),
+  },
+])('<DashboardCertificate/> $label', ({ overrideFactory }) => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
       <QueryClientProvider client={createTestQueryClient({ user: true })}>
@@ -66,21 +80,24 @@ describe.each([
   });
 
   it('displays a certificate', async () => {
-    const certificate: Certificate = CertificateFactory({
-      order: OrderFactory().one(),
-    }).one();
+    const certificate: Certificate = CertificateFactory(overrideFactory()).one();
     render(
       <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,
       { wrapper: Wrapper },
     );
 
     await waitFor(() => screen.getByText(certificate.certificate_definition.title));
-    const orderCourse =
-      label === 'link to a credential order'
-        ? certificate.order.course!
-        : certificate.order.enrollment!.course_run.course;
 
-    screen.getByText(orderCourse.title);
+    let course;
+    if (certificate.enrollment) {
+      course = certificate.enrollment.course_run.course;
+    } else if (certificate.order!.course) {
+      course = certificate.order!.course;
+    } else {
+      course = certificate.order!.enrollment.course_run.course;
+    }
+
+    screen.getByText(course.title);
     screen.getByText(
       'Issued on ' +
         new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(certificate.issued_on)),
@@ -88,9 +105,7 @@ describe.each([
   });
 
   it('downloads the certificate', async () => {
-    const certificate: Certificate = CertificateFactory({
-      order: OrderFactory().one(),
-    }).one();
+    const certificate: Certificate = CertificateFactory(overrideFactory()).one();
 
     fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, () => ({
       status: HttpStatusCode.OK,

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { Certificate, CertificateDefinition, CourseLight, ProductType } from 'types/Joanie';
 import {
@@ -6,6 +7,7 @@ import {
 } from 'widgets/Dashboard/components/DashboardItem/index';
 import { Maybe } from 'types/utils';
 import DownloadCertificateButton from 'components/DownloadCertificateButton';
+import { CertificateHelper } from 'utils/CertificateHelper';
 import CertificateStatus from '../CertificateStatus';
 
 interface DashboardItemCertificateProps {
@@ -20,40 +22,33 @@ export const DashboardItemCertificate = ({
   productType,
   mode,
 }: DashboardItemCertificateProps) => {
-  if (certificate) {
-    if (certificateDefinition) {
+  const getCertificateDefinition = () => {
+    if (certificate && certificateDefinition) {
       throw new Error('certificate and certificateDefinition are mutually exclusive');
+    } else if (!certificate && !certificateDefinition) {
+      throw new Error('certificate or certificateDefinition is required');
     }
-    certificateDefinition = certificate.certificate_definition;
-  } else if (certificateDefinition) {
-    if (certificate) {
-      throw new Error('certificate and certificateDefinition are mutually exclusive');
-    }
-  } else {
-    throw new Error('certificate or certificateDefinition is required');
-  }
 
-  let course: Maybe<CourseLight>;
-  if (certificate) {
-    if (certificate.order?.course) {
-      course = certificate.order.course;
-    } else {
-      course = certificate.order.enrollment.course_run.course;
-    }
-  }
+    return certificate ? certificate.certificate_definition : certificateDefinition;
+  };
+
+  const course: Maybe<CourseLight> = useMemo(
+    () => CertificateHelper.getCourse(certificate),
+    [certificate],
+  );
+  const definition = useMemo(getCertificateDefinition, [certificate]);
 
   return (
     <DashboardItem
       mode={mode}
       title={course?.title ?? ''}
       code={'Ref. ' + (course?.code ?? '')}
-      imageUrl="https://d29emq8to944i.cloudfront.net/cba69447-b9f7-b4d7-c0d5-4d98b5280a4e/thumbnails/1659356729_1080.jpg"
       imageFile={course?.cover}
       footer={
         <>
           <div className="dashboard-certificate__body">
             <Icon name={IconTypeEnum.CERTIFICATE} />
-            <span>{certificateDefinition!.title}</span>
+            <span>{definition!.title}</span>
           </div>
           <div className="dashboard-certificate__footer">
             <span>

package/package.json

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