richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { IntlProvider, createIntl } from 'react-intl';
+import { faker } from '@faker-js/faker';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import ContractStatus from '.';
+
+describe('<ContractStatus />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return <IntlProvider locale="en">{children}</IntlProvider>;
+  };
+  it('should display status for unsigned contract', () => {
+    render(
+      <Wrapper>
+        <ContractStatus
+          contract={ContractFactory({
+            student_signed_on: null,
+            organization_signed_on: null,
+          }).one()}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      screen.queryByText('You have to sign this training contract to access your training.'),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByText(/You signed this training contract/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/The organization has signed this training contract./),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'You cannot download your training contract until it had been signed by the organization.',
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display status for a contract signed by the studdent', () => {
+    const intl = createIntl({ locale: 'en' });
+    const studentSignedOn = faker.date.past().toISOString();
+    render(
+      <Wrapper>
+        <ContractStatus
+          contract={ContractFactory({
+            student_signed_on: studentSignedOn,
+            organization_signed_on: null,
+          }).one()}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      screen.queryByText(
+        `You signed this training contract. Signed on ${intl.formatDate(studentSignedOn, {
+          ...DEFAULT_DATE_FORMAT,
+        })}`,
+        { exact: false },
+      ),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByText(
+        'You cannot download your training contract until it had been signed by the organization.',
+      ),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByText('You have to sign this training contract to access your training.'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/The organization has signed this training contract./),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display status for a contract signed by the studdent and the organization', () => {
+    const intl = createIntl({ locale: 'en' });
+    const studentSignedOn = faker.date.past().toISOString();
+    const organizationSignedOn = faker.date.past().toISOString();
+    render(
+      <Wrapper>
+        <ContractStatus
+          contract={ContractFactory({
+            student_signed_on: studentSignedOn,
+            organization_signed_on: organizationSignedOn,
+          }).one()}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      screen.queryByText(
+        `You signed this training contract. Signed on ${intl.formatDate(studentSignedOn, {
+          ...DEFAULT_DATE_FORMAT,
+        })}`,
+      ),
+    ).toBeInTheDocument();
+    // The organization has signed this training contract. Signed on {date}
+    expect(
+      screen.queryByText(
+        `The organization has signed this training contract. Signed on ${intl.formatDate(
+          organizationSignedOn,
+          {
+            ...DEFAULT_DATE_FORMAT,
+          },
+        )}`,
+      ),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByText(
+        'You cannot download your training contract until it had been signed by the organization.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('You have to sign this training contract to access your training.'),
+    ).not.toBeInTheDocument();
+  });
+});

package/js/components/ContractStatus/index.tsx

@@ -0,0 +1,67 @@
+import { FormattedMessage, defineMessages } from 'react-intl';
+import useDateFormat from 'hooks/useDateFormat';
+import { Contract, ContractState } from 'types/Joanie';
+import { ContractHelper } from 'utils/ContractHelper';
+
+const messages = defineMessages({
+  learnerSignedOn: {
+    defaultMessage: 'You signed this training contract. Signed on {date}',
+    description: 'Label for the date of sign of a training contract by the learner',
+    id: 'components.ContractStatus.learnerSignedOn',
+  },
+  organizationSignedOn: {
+    defaultMessage: 'The organization has signed this training contract. Signed on {date}',
+    description: 'Label for the date of sign of a training contract by the organization',
+    id: 'components.ContractStatus.organizationSignedOn',
+  },
+  waitingLearnerSignature: {
+    defaultMessage: 'You have to sign this training contract to access your training.',
+    description: 'Label displayed when a training contract need to be signed by the learner',
+    id: 'components.ContractStatus.waitingSignature',
+  },
+  waitingOrganization: {
+    defaultMessage:
+      'You cannot download your training contract until it had been signed by the organization.',
+    description: 'Label displayed when a training contract need to be signed by the organization',
+    id: 'components.ContractStatus.waitingOrganization',
+  },
+});
+
+export interface ContractStatusProps {
+  contract?: Contract;
+}
+const ContractStatus = ({ contract }: ContractStatusProps) => {
+  const { student_signed_on: studentSignedOn, organization_signed_on: organizationSignedOn } =
+    contract || {};
+  const state = ContractHelper.getState(contract);
+  const formatDate = useDateFormat();
+
+  return state === ContractState.UNSIGNED ? (
+    <FormattedMessage {...messages.waitingLearnerSignature} />
+  ) : (
+    <>
+      {[ContractState.SIGNED, ContractState.LEARNER_SIGNED].includes(state) && (
+        <div>
+          <FormattedMessage
+            {...messages.learnerSignedOn}
+            values={{ date: formatDate(studentSignedOn!) }}
+          />
+        </div>
+      )}
+      {state === ContractState.SIGNED ? (
+        <div>
+          <FormattedMessage
+            {...messages.organizationSignedOn}
+            values={{ date: formatDate(organizationSignedOn!) }}
+          />
+        </div>
+      ) : (
+        <div>
+          <FormattedMessage {...messages.waitingOrganization} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ContractStatus;

package/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CommonDataProps } from 'types/commonDataProps';
-import { CourseState } from 'types';
+import { CourseGlimpseCourse } from 'components/CourseGlimpse/index';
 
 const messages = defineMessages({
   dateIconAlt: {
@@ -16,18 +16,18 @@ const messages = defineMessages({
  * <CourseGlimpseFooter />.
  * This is spun off from <CourseGlimpse /> to allow easier override through webpack.
  */
-export const CourseGlimpseFooter: React.FC<{ courseState: CourseState } & CommonDataProps> = ({
-  courseState,
+export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & CommonDataProps> = ({
+  course,
 }) => {
   const intl = useIntl();
   return (
     <div className="course-glimpse-footer">
       <div className="course-glimpse-footer__date">
         <Icon name={IconTypeEnum.CALENDAR} title={intl.formatMessage(messages.dateIconAlt)} />
-        {courseState.text.charAt(0).toUpperCase() +
-          courseState.text.substring(1) +
-          (courseState.datetime
-            ? ` ${intl.formatDate(new Date(courseState.datetime!), {
+        {course.state.text.charAt(0).toUpperCase() +
+          course.state.text.substring(1) +
+          (course.state.datetime
+            ? ` ${intl.formatDate(new Date(course.state.datetime!), {
                 year: 'numeric',
                 month: 'short',
                 day: 'numeric',

package/js/components/CourseGlimpse/index.tsx

@@ -36,6 +36,10 @@ export interface CourseGlimpseCourse {
   }>;
   state: CourseState;
   nb_course_runs?: number;
+  organizations?: string[];
+  duration?: string;
+  effort?: string;
+  categories?: string[];
 }
 
 export interface CourseGlimpseProps {
@@ -150,7 +154,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
             </span>
           </div>
         ) : null}
-        <CourseGlimpseFooter context={context} courseState={course.state} />
+        <CourseGlimpseFooter context={context} course={course} />
       </div>
     </div>
   );

package/js/components/CourseGlimpse/utils.ts

@@ -1,4 +1,4 @@
-import { createIntl } from 'react-intl';
+import { IntlShape } from 'react-intl';
 import { Course as RichieCourse, isRichieCourse } from 'types/Course';
 import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
@@ -11,10 +11,9 @@ import { CourseGlimpseCourse } from '.';
 
 const getCourseGlimpsePropsFromCourseProductRelation = (
   courseProductRelation: CourseProductRelation,
-  locale: string = 'en',
+  intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
-  const intl = createIntl({ locale });
   const getRoutePath = getDashboardRoutePath(intl);
   const courseRouteParams = {
     courseId: courseProductRelation.course.id,
@@ -27,11 +26,21 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
       })
     : getRoutePath(TeacherDashboardPaths.COURSE_PRODUCT, courseRouteParams);
   return {
-    ...getCourseGlimpsePropsFromJoanieCourse(courseProductRelation.course),
     id: courseProductRelation.id,
+    code: courseProductRelation.course.code,
     title: courseProductRelation.product.title,
+    cover_image: courseProductRelation.course.cover
+      ? {
+          src: courseProductRelation.course.cover.src,
+        }
+      : null,
+    organization: {
+      title: courseProductRelation.organizations[0].title,
+      image: courseProductRelation.organizations[0].logo || null,
+    },
     product_id: courseProductRelation.product.id,
     course_route: courseRoute,
+    state: courseProductRelation.product.state,
   };
 };
 
@@ -47,14 +56,17 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   },
   icon: course.icon,
   state: course.state,
+  duration: course.duration,
+  effort: course.effort,
+  categories: course.categories,
+  organizations: course.organizations,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
   course: JoanieCourse,
-  locale: string = 'en',
+  intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
-  const intl = createIntl({ locale });
   const getRoutePath = getDashboardRoutePath(intl);
   const courseRouteParams = {
     courseId: course.id,
@@ -71,35 +83,31 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     course_route: courseRoute,
     cover_image: course.cover
       ? {
-          src: course.cover.url,
+          src: course.cover.src,
         }
       : null,
     title: course.title,
     organization: {
       title: course.organizations[0].title,
-      image: course.organizations[0].logo
-        ? {
-            src: course.organizations[0].logo.src,
-          }
-        : null,
+      image: course.organizations[0].logo || null,
     },
     state: course.state,
-    nb_course_runs: course.course_runs.length,
+    nb_course_runs: course.course_run_ids.length,
   };
 };
 
 export const getCourseGlimpseProps = (
   course: RichieCourse | (JoanieCourse | CourseProductRelation),
-  locale?: string,
+  intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
   if (isCourseProductRelation(course)) {
-    return getCourseGlimpsePropsFromCourseProductRelation(course, locale, organizationId);
+    return getCourseGlimpsePropsFromCourseProductRelation(course, intl!, organizationId);
   }
 
   if (isRichieCourse(course)) {
     return getCourseGlimpsePropsFromRichieCourse(course);
   }
 
-  return getCourseGlimpsePropsFromJoanieCourse(course, locale, organizationId);
+  return getCourseGlimpsePropsFromJoanieCourse(course, intl!, organizationId);
 };

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

@@ -59,7 +59,7 @@ describe('widgets/Search/components/CourseGlimpseList', () => {
     expect(srOnlyCount).toHaveAttribute('aria-live', 'polite');
     expect(srOnlyCount).toHaveAttribute('aria-atomic', 'true');
     // the message shown in the UI
-    expect(container.querySelector('.course-glimpse-list__count')).toHaveAttribute(
+    expect(container.querySelector('.list__count-description')).toHaveAttribute(
       'aria-hidden',
       'true',
     );

package/js/components/CourseGlimpseList/index.tsx

@@ -61,7 +61,7 @@ export const CourseGlimpseList = ({
               }}
             />
           </div>
-          <div className="course-glimpse-list__count" aria-hidden="true">
+          <div className="course-glimpse-list__count list__count-description" aria-hidden="true">
             <FormattedMessage
               {...messages.courseCount}
               values={{

package/js/components/CourseGlimpseList/utils.ts

@@ -1,11 +1,12 @@
+import { IntlShape } from 'react-intl';
 import { CourseProductRelation, CourseListItem as JoanieCourse } from 'types/Joanie';
 import { Course as RichieCourse } from 'types/Course';
 import { CourseGlimpseCourse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 
 export const getCourseGlimpseListProps = (
   courses: RichieCourse[] | (JoanieCourse | CourseProductRelation)[],
-  locale?: string,
+  intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse[] => {
-  return courses.map((course) => getCourseGlimpseProps(course, locale, organizationId));
+  return courses.map((course) => getCourseGlimpseProps(course, intl, organizationId));
 };

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

@@ -27,7 +27,7 @@ describe('DjangoCMSTemplate', () => {
 
     expect(initMock).not.toHaveBeenCalled();
     render(<Wrapper />);
-    const expected = `<div><template class="cms-plugin cms-plugin-start plugin"></template>Hello world<template class="cms-plugin cms-plugin-end plugin"></template></div>`;
+    const expected = `<div id=\"modal-exclude\"></div><div><template class="cms-plugin cms-plugin-start plugin"></template>Hello world<template class="cms-plugin cms-plugin-end plugin"></template></div>`;
     expect(document.body.innerHTML).toEqual(expected);
     await waitFor(() => expect(initMock).toHaveBeenCalled());
   });
@@ -40,7 +40,7 @@ describe('DjangoCMSTemplate', () => {
     };
 
     render(<Wrapper />);
-    const expected = `<div>Hello world</div>`;
+    const expected = `<div id=\"modal-exclude\"></div><div>Hello world</div>`;
     expect(document.body.innerHTML).toEqual(expected);
   });
 });

package/js/components/DownloadCertificateButton/index.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useDownloadCertificate } from 'hooks/useDownloadCertificate';
+import { Certificate } from 'types/Joanie';
+
+const messages = defineMessages({
+  download: {
+    defaultMessage: 'Download',
+    description: 'Label for the download button of a certificate',
+    id: 'components.DownloadCertificateButton.download',
+  },
+  generatingCertificate: {
+    defaultMessage: 'Certificate is being generated...',
+    description: 'Accessible label displayed while certificate is being generated.',
+    id: 'components.DownloadCertificateButton.generatingCertificate',
+  },
+});
+
+interface DownloadCertificateButtonProps {
+  certificateId: Certificate['id'];
+  className?: string;
+}
+
+const DownloadCertificateButton = ({
+  certificateId,
+  className,
+}: DownloadCertificateButtonProps) => {
+  const { download, loading } = useDownloadCertificate();
+  const onDownloadClick = async () => {
+    if (!certificateId) {
+      return;
+    }
+    await download(certificateId);
+  };
+
+  return (
+    <Button
+      className={className}
+      size="small"
+      color="secondary"
+      disabled={loading}
+      onClick={onDownloadClick}
+    >
+      {loading ? (
+        <Spinner theme="primary" aria-labelledby="generating-certificate">
+          <span id="generating-certificate">
+            <FormattedMessage {...messages.generatingCertificate} />
+          </span>
+        </Spinner>
+      ) : (
+        <FormattedMessage {...messages.download} />
+      )}
+    </Button>
+  );
+};
+
+export default DownloadCertificateButton;

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

@@ -0,0 +1,155 @@
+import { PropsWithChildren } from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
+import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+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', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  alert: jest.fn(() => true),
+}));
+
+describe('<DownloadContractButton/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should render', () => {
+    render(
+      <Wrapper>
+        <DownloadContractButton contract={ContractFactory().one()} />
+      </Wrapper>,
+    );
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
+  });
+
+  it('downloads the contract', async () => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn((blob) => blob) as any;
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    window.open = jest.fn();
+
+    const order = CredentialOrderFactory({
+      target_enrollments: [],
+      contract: ContractFactory({ student_signed_on: faker.date.past().toISOString() }).one(),
+    }).one();
+
+    const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
+      order.contract!.id
+    }/download/`;
+
+    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>
+        <DownloadContractButton contract={order.contract!} />
+      </Wrapper>,
+    );
+
+    const user = userEvent.setup();
+
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    expect(window.open).toHaveBeenCalledTimes(0);
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+
+    // Click on download and make sure the following function have been called with response content.
+    const $downloadButton = screen.getByRole('button', { name: 'Download' });
+    await user.click($downloadButton);
+
+    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.createObjectURL).toHaveBeenCalledWith(expectedFile);
+    expect(window.open).toHaveBeenCalledTimes(1);
+    expect(window.open).toHaveBeenCalledWith(expectedFile);
+  });
+
+  it('fails downloading the contract and shows an error', async () => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn((blob) => blob) as any;
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    window.open = jest.fn();
+
+    const order = CredentialOrderFactory({
+      // target_courses: TargetCourseFactory().many(1),
+      target_enrollments: [],
+      contract: ContractFactory({ student_signed_on: faker.date.past().toISOString() }).one(),
+    }).one();
+
+    const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
+      order.contract!.id
+    }/download/`;
+    fetchMock.get(DOWNLOAD_URL, {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Bad request',
+    });
+
+    render(
+      <Wrapper>
+        <DownloadContractButton contract={order.contract!} />
+      </Wrapper>,
+    );
+
+    const user = userEvent.setup();
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    expect(window.open).toHaveBeenCalledTimes(0);
+    expect(alert).toHaveBeenCalledTimes(0);
+
+    // Click on download and make sure the following function have been called with response content.
+    const $downloadButton = screen.getByRole('button', { name: 'Download' });
+    await user.click($downloadButton);
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    expect(window.open).toHaveBeenCalledTimes(0);
+
+    expect(alert).toHaveBeenCalledTimes(1);
+    expect(alert).toHaveBeenCalledWith(
+      'An error happened while downloading the training contract. Please try again later.',
+    );
+  });
+});

package/js/components/DownloadContractButton/index.tsx

@@ -0,0 +1,48 @@
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { Contract } from 'types/Joanie';
+import { alert } from 'utils/indirection/window';
+import { browserDownloadFromBlob } from 'utils/download';
+
+const messages = defineMessages({
+  contractDownloadActionLabel: {
+    id: 'components.DownloadContractButton.contractDownloadActionLabel',
+    description: 'Label of "download contract" action.',
+    defaultMessage: 'Download',
+  },
+  contractDownloadError: {
+    id: 'components.DownloadContractButton.contractDownloadError',
+    description: "Message displayed when the order's contract download fails.",
+    defaultMessage:
+      'An error happened while downloading the training contract. Please try again later.',
+  },
+});
+
+interface DownloadContractButtonProps {
+  contract: Contract;
+  className?: string;
+}
+
+const DownloadContractButton = ({ contract, className }: DownloadContractButtonProps) => {
+  const api = useJoanieApi();
+  const intl = useIntl();
+
+  const downloadContract = async () => {
+    const success = await browserDownloadFromBlob(
+      () => api.user.contracts.download(contract!.id),
+      true,
+    );
+    if (!success) {
+      alert(intl.formatMessage(messages.contractDownloadError));
+    }
+  };
+
+  return (
+    <Button size="small" className={className} color="secondary" onClick={downloadContract}>
+      <FormattedMessage {...messages.contractDownloadActionLabel} />
+    </Button>
+  );
+};
+
+export default DownloadContractButton;