From 28baed5923c19cf915f54750ed20931c18b5d008 Mon Sep 17 00:00:00 2001
From: Kyr <40792129+khudym@users.noreply.github.com>
Date: Fri, 19 Jan 2024 19:24:17 +0200
Subject: [PATCH] feat: [FC-0044] Certificates page
---
src/CourseAuthoringRoutes.jsx | 5 +
src/certificates/Certificates.jsx | 57 +++++
src/certificates/Certificates.test.jsx | 189 +++++++++++++++++
src/certificates/__mocks__/certificates.js | 20 ++
.../__mocks__/certificatesData.js | 32 +++
src/certificates/__mocks__/index.js | 3 +
src/certificates/__mocks__/signatories.js | 8 +
.../CertificateCreateForm.jsx | 70 ++++++
.../CertificatesCreateForm.test.jsx | 156 ++++++++++++++
.../hooks/useCertificateCreateForm.jsx | 28 +++
.../CertificateDetails.jsx | 123 +++++++++++
.../CertificateDetails.test.jsx | 118 +++++++++++
.../CertificateDetailsForm.jsx | 54 +++++
.../CertificateDetailsForm.test.jsx | 77 +++++++
.../hooks/useCertificateDetails.jsx | 40 ++++
.../certificate-details/messages.js | 46 ++++
.../CertificateEditForm.jsx | 104 +++++++++
.../CertificateEditForm.test.jsx | 140 ++++++++++++
.../hooks/useCertificateEditForm.jsx | 62 ++++++
.../CertificateSection.jsx | 29 +++
.../CertificateSignatories.jsx | 130 ++++++++++++
.../CertificateSignatories.test.jsx | 110 ++++++++++
.../hooks/useCreateSignatory.jsx | 15 ++
.../hooks/useEditSignatory.jsx | 33 +++
.../certificate-signatories/messages.js | 94 ++++++++
.../signatory/Signatory.jsx | 66 ++++++
.../signatory/Signatory.test.jsx | 45 ++++
.../signatory/SignatoryForm.jsx | 200 ++++++++++++++++++
.../signatory/SignatoryForm.test.jsx | 161 ++++++++++++++
.../CertificateWithoutModes.jsx | 17 ++
.../CertificateWithoutModes.test.jsx | 43 ++++
.../certificates-list/CertificatesList.jsx | 69 ++++++
.../CertificatesList.test.jsx | 133 ++++++++++++
.../hooks/useCertificatesList.jsx | 45 ++++
src/certificates/constants.js | 13 ++
src/certificates/data/api.js | 89 ++++++++
src/certificates/data/constants.js | 12 ++
src/certificates/data/selectors.js | 21 ++
src/certificates/data/slice.js | 59 ++++++
src/certificates/data/thunks.js | 122 +++++++++++
.../EmptyCertificatesWithModes.jsx | 36 ++++
.../EmptyCertificatesWithModes.test.jsx | 44 ++++
src/certificates/hooks/useCertificates.jsx | 49 +++++
src/certificates/index.js | 2 +
src/certificates/layout/MainLayout.jsx | 77 +++++++
.../CertificatesSidebar.jsx | 45 ++++
.../CertificatesSidebar.test.jsx | 56 +++++
.../layout/certificates-sidebar/messages.js | 54 +++++
.../sidebar-block/SidebarBlock.jsx | 31 +++
.../sidebar-block/SidebarBlock.test.jsx | 33 +++
.../layout/certificates-sidebar/utils.jsx | 30 +++
.../layout/header-buttons/HeaderButtons.jsx | 46 ++++
.../header-buttons/HeaderButtons.test.jsx | 130 ++++++++++++
.../header-buttons/hooks/useHeaderButtons.jsx | 49 +++++
src/certificates/layout/hooks/useLayout.jsx | 33 +++
src/certificates/messages.js | 62 ++++++
src/certificates/scss/Certificates.scss | 115 ++++++++++
src/certificates/scss/_variables.scss | 1 +
src/certificates/utils.js | 15 ++
src/generic/modal-dropzone/ModalDropzone.jsx | 136 ++++++++++++
src/generic/modal-dropzone/ModalDropzone.scss | 14 ++
.../modal-dropzone/ModalDropzone.test.jsx | 134 ++++++++++++
src/generic/modal-dropzone/data/api.js | 29 +++
src/generic/modal-dropzone/messages.js | 26 +++
.../modal-dropzone/useModalDropzone.jsx | 124 +++++++++++
src/generic/styles.scss | 1 +
src/i18n/messages/ar.json | 52 ++++-
src/i18n/messages/de.json | 52 ++++-
src/i18n/messages/de_DE.json | 52 ++++-
src/i18n/messages/es_419.json | 52 ++++-
src/i18n/messages/fa_IR.json | 52 ++++-
src/i18n/messages/fr.json | 52 ++++-
src/i18n/messages/fr_CA.json | 52 ++++-
src/i18n/messages/hi.json | 52 ++++-
src/i18n/messages/it.json | 52 ++++-
src/i18n/messages/it_IT.json | 52 ++++-
src/i18n/messages/pt.json | 52 ++++-
src/i18n/messages/pt_PT.json | 52 ++++-
src/i18n/messages/ru.json | 52 ++++-
src/i18n/messages/uk.json | 52 ++++-
src/i18n/messages/zh_CN.json | 52 ++++-
src/index.scss | 1 +
src/store.js | 2 +
83 files changed, 4948 insertions(+), 45 deletions(-)
create mode 100644 src/certificates/Certificates.jsx
create mode 100644 src/certificates/Certificates.test.jsx
create mode 100644 src/certificates/__mocks__/certificates.js
create mode 100644 src/certificates/__mocks__/certificatesData.js
create mode 100644 src/certificates/__mocks__/index.js
create mode 100644 src/certificates/__mocks__/signatories.js
create mode 100644 src/certificates/certificate-create-form/CertificateCreateForm.jsx
create mode 100644 src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx
create mode 100644 src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx
create mode 100644 src/certificates/certificate-details/CertificateDetails.jsx
create mode 100644 src/certificates/certificate-details/CertificateDetails.test.jsx
create mode 100644 src/certificates/certificate-details/CertificateDetailsForm.jsx
create mode 100644 src/certificates/certificate-details/CertificateDetailsForm.test.jsx
create mode 100644 src/certificates/certificate-details/hooks/useCertificateDetails.jsx
create mode 100644 src/certificates/certificate-details/messages.js
create mode 100644 src/certificates/certificate-edit-form/CertificateEditForm.jsx
create mode 100644 src/certificates/certificate-edit-form/CertificateEditForm.test.jsx
create mode 100644 src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx
create mode 100644 src/certificates/certificate-section/CertificateSection.jsx
create mode 100644 src/certificates/certificate-signatories/CertificateSignatories.jsx
create mode 100644 src/certificates/certificate-signatories/CertificateSignatories.test.jsx
create mode 100644 src/certificates/certificate-signatories/hooks/useCreateSignatory.jsx
create mode 100644 src/certificates/certificate-signatories/hooks/useEditSignatory.jsx
create mode 100644 src/certificates/certificate-signatories/messages.js
create mode 100644 src/certificates/certificate-signatories/signatory/Signatory.jsx
create mode 100644 src/certificates/certificate-signatories/signatory/Signatory.test.jsx
create mode 100644 src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
create mode 100644 src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx
create mode 100644 src/certificates/certificate-without-modes/CertificateWithoutModes.jsx
create mode 100644 src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx
create mode 100644 src/certificates/certificates-list/CertificatesList.jsx
create mode 100644 src/certificates/certificates-list/CertificatesList.test.jsx
create mode 100644 src/certificates/certificates-list/hooks/useCertificatesList.jsx
create mode 100644 src/certificates/constants.js
create mode 100644 src/certificates/data/api.js
create mode 100644 src/certificates/data/constants.js
create mode 100644 src/certificates/data/selectors.js
create mode 100644 src/certificates/data/slice.js
create mode 100644 src/certificates/data/thunks.js
create mode 100644 src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.jsx
create mode 100644 src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.jsx
create mode 100644 src/certificates/hooks/useCertificates.jsx
create mode 100644 src/certificates/index.js
create mode 100644 src/certificates/layout/MainLayout.jsx
create mode 100644 src/certificates/layout/certificates-sidebar/CertificatesSidebar.jsx
create mode 100644 src/certificates/layout/certificates-sidebar/CertificatesSidebar.test.jsx
create mode 100644 src/certificates/layout/certificates-sidebar/messages.js
create mode 100644 src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.jsx
create mode 100644 src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.test.jsx
create mode 100644 src/certificates/layout/certificates-sidebar/utils.jsx
create mode 100644 src/certificates/layout/header-buttons/HeaderButtons.jsx
create mode 100644 src/certificates/layout/header-buttons/HeaderButtons.test.jsx
create mode 100644 src/certificates/layout/header-buttons/hooks/useHeaderButtons.jsx
create mode 100644 src/certificates/layout/hooks/useLayout.jsx
create mode 100644 src/certificates/messages.js
create mode 100644 src/certificates/scss/Certificates.scss
create mode 100644 src/certificates/scss/_variables.scss
create mode 100644 src/certificates/utils.js
create mode 100644 src/generic/modal-dropzone/ModalDropzone.jsx
create mode 100644 src/generic/modal-dropzone/ModalDropzone.scss
create mode 100644 src/generic/modal-dropzone/ModalDropzone.test.jsx
create mode 100644 src/generic/modal-dropzone/data/api.js
create mode 100644 src/generic/modal-dropzone/messages.js
create mode 100644 src/generic/modal-dropzone/useModalDropzone.jsx
diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
index 9102699748..1f02383030 100644
--- a/src/CourseAuthoringRoutes.jsx
+++ b/src/CourseAuthoringRoutes.jsx
@@ -17,6 +17,7 @@ import { GradingSettings } from './grading-settings';
import CourseTeam from './course-team/CourseTeam';
import { CourseUpdates } from './course-updates';
import { CourseUnit } from './course-unit';
+import { Certificates } from './certificates';
import CourseExportPage from './export-page/CourseExportPage';
import CourseImportPage from './import-page/CourseImportPage';
import { DECODED_ROUTES } from './constants';
@@ -115,6 +116,10 @@ const CourseAuthoringRoutes = () => {
path="checklists"
element={}
/>
+ }
+ />
);
diff --git a/src/certificates/Certificates.jsx b/src/certificates/Certificates.jsx
new file mode 100644
index 0000000000..fd67f74542
--- /dev/null
+++ b/src/certificates/Certificates.jsx
@@ -0,0 +1,57 @@
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+import Placeholder from '@edx/frontend-lib-content-components';
+
+import { RequestStatus } from '../data/constants';
+import Loading from '../generic/Loading';
+import useCertificates from './hooks/useCertificates';
+import CertificateWithoutModes from './certificate-without-modes/CertificateWithoutModes';
+import EmptyCertificatesWithModes from './empty-certificates-with-modes/EmptyCertificatesWithModes';
+import CertificatesList from './certificates-list/CertificatesList';
+import CertificateCreateForm from './certificate-create-form/CertificateCreateForm';
+import CertificateEditForm from './certificate-edit-form/CertificateEditForm';
+import { MODE_STATES } from './data/constants';
+import MainLayout from './layout/MainLayout';
+
+const MODE_COMPONENTS = {
+ [MODE_STATES.noModes]: CertificateWithoutModes,
+ [MODE_STATES.noCertificates]: EmptyCertificatesWithModes,
+ [MODE_STATES.create]: CertificateCreateForm,
+ [MODE_STATES.view]: CertificatesList,
+ [MODE_STATES.editAll]: CertificateEditForm,
+};
+
+const Certificates = ({ courseId }) => {
+ const {
+ certificates, componentMode, isLoading, loadingStatus, pageHeadTitle, hasCertificateModes,
+ } = useCertificates({ courseId });
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (loadingStatus === RequestStatus.DENIED) {
+ return (
+
+ );
+ }
+
+ const ModeComponent = MODE_COMPONENTS[componentMode] || MODE_COMPONENTS[MODE_STATES.noModes];
+
+ return (
+ <>
+ {pageHeadTitle}
+ 0}>
+
+
+
+ );
+};
+
+Certificates.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default Certificates;
diff --git a/src/certificates/Certificates.test.jsx b/src/certificates/Certificates.test.jsx
new file mode 100644
index 0000000000..e04d50a21c
--- /dev/null
+++ b/src/certificates/Certificates.test.jsx
@@ -0,0 +1,189 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { RequestStatus } from '../data/constants';
+import { executeThunk } from '../utils';
+import initializeStore from '../store';
+import { getCertificatesApiUrl } from './data/api';
+import { fetchCertificates } from './data/thunks';
+import { certificatesDataMock } from './__mocks__';
+import Certificates from './Certificates';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = (props) => render(
+
+
+
+
+ ,
+);
+
+describe('Certificates', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore();
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ });
+
+ it('renders WithoutModes when there are certificates but no certificate modes', async () => {
+ const noModesMock = {
+ ...certificatesDataMock,
+ courseModes: [],
+ hasCertificateModes: false,
+ };
+
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, noModesMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { getByText, queryByRole } = renderComponent();
+
+ await waitFor(() => {
+ expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+ expect(queryByRole('button', { name: messages.headingActionsPreview.defaultMessage })).not.toBeInTheDocument();
+ });
+ });
+
+ it('renders WithoutModes when there are no certificate modes', async () => {
+ const noModesMock = {
+ ...certificatesDataMock,
+ certificates: [],
+ courseModes: [],
+ hasCertificateModes: false,
+ };
+
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, noModesMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { getByText, queryByText } = renderComponent();
+
+ await waitFor(() => {
+ expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+ expect(queryByText(messages.noCertificatesText.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+
+ it('renders WithModesWithoutCertificates when there are modes but no certificates', async () => {
+ const noCertificatesMock = {
+ ...certificatesDataMock,
+ certificates: [],
+ };
+
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, noCertificatesMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { getByText, queryByText } = renderComponent();
+
+ await waitFor(() => {
+ expect(getByText(messages.noCertificatesText.defaultMessage)).toBeInTheDocument();
+ expect(queryByText(messages.withoutModesText.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+
+ it('renders CertificatesList when there are modes and certificates', async () => {
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, certificatesDataMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { getByText, queryByText, getByTestId } = renderComponent();
+
+ await waitFor(() => {
+ expect(getByTestId('certificates-list')).toBeInTheDocument();
+ expect(getByText(certificatesDataMock.courseTitle)).toBeInTheDocument();
+ expect(getByText(certificatesDataMock.certificates[0].signatories[0].name)).toBeInTheDocument();
+ expect(queryByText(messages.noCertificatesText.defaultMessage)).not.toBeInTheDocument();
+ expect(queryByText(messages.withoutModesText.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+
+ it('renders CertificateCreateForm when there is componentMode = MODE_STATES.create', async () => {
+ const noCertificatesMock = {
+ ...certificatesDataMock,
+ certificates: [],
+ };
+
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, noCertificatesMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { queryByTestId, getByTestId, getByRole } = renderComponent();
+
+ await waitFor(() => {
+ const addCertificateButton = getByRole('button', { name: messages.setupCertificateBtn.defaultMessage });
+ userEvent.click(addCertificateButton);
+ });
+
+ expect(getByTestId('certificates-create-form')).toBeInTheDocument();
+ expect(getByTestId('certificate-details-form')).toBeInTheDocument();
+ expect(getByTestId('signatory-form')).toBeInTheDocument();
+ expect(queryByTestId('certificate-details')).not.toBeInTheDocument();
+ expect(queryByTestId('signatory')).not.toBeInTheDocument();
+ });
+
+ it('renders CertificateEditForm when there is componentMode = MODE_STATES.editAll', async () => {
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, certificatesDataMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ const { queryByTestId, getByTestId, getAllByLabelText } = renderComponent();
+
+ await waitFor(() => {
+ const editCertificateButton = getAllByLabelText(messages.editTooltip.defaultMessage)[0];
+ userEvent.click(editCertificateButton);
+ });
+
+ expect(getByTestId('certificates-edit-form')).toBeInTheDocument();
+ expect(getByTestId('certificate-details-form')).toBeInTheDocument();
+ expect(getByTestId('signatory-form')).toBeInTheDocument();
+ expect(queryByTestId('certificate-details')).not.toBeInTheDocument();
+ expect(queryByTestId('signatory')).not.toBeInTheDocument();
+ });
+
+ it('renders placeholder if request fails', async () => {
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(403, certificatesDataMock);
+
+ const { getByTestId } = renderComponent();
+
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ expect(getByTestId('request-denied-placeholder')).toBeInTheDocument();
+ });
+
+ it('updates loading status if request fails', async () => {
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(404, certificatesDataMock);
+
+ renderComponent();
+
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+ expect(store.getState().certificates.loadingStatus).toBe(RequestStatus.FAILED);
+ });
+});
diff --git a/src/certificates/__mocks__/certificates.js b/src/certificates/__mocks__/certificates.js
new file mode 100644
index 0000000000..850c1ee0d4
--- /dev/null
+++ b/src/certificates/__mocks__/certificates.js
@@ -0,0 +1,20 @@
+module.exports = [
+ {
+ id: 1,
+ courseTitle: 'Course Title 1',
+ signatories: [
+ {
+ name: 'Signatory Name 1',
+ title: 'Signatory Title 1',
+ organization: 'Signatory Organization 1',
+ signatureImagePath: '/path/to/signature1/image.png',
+ },
+ {
+ name: 'Signatory Name 2',
+ title: 'Signatory Title 2',
+ organization: 'Signatory Organization 2',
+ signatureImagePath: '/path/to/signature2/image.png',
+ },
+ ],
+ },
+];
diff --git a/src/certificates/__mocks__/certificatesData.js b/src/certificates/__mocks__/certificatesData.js
new file mode 100644
index 0000000000..20be2e9d0e
--- /dev/null
+++ b/src/certificates/__mocks__/certificatesData.js
@@ -0,0 +1,32 @@
+module.exports = {
+ certificateActivationHandlerUrl: '/certificates/activation/course-v1:org+101+101/',
+ certificateWebViewUrl: '//certificates/course/course-v1:org+101+101?preview=honor',
+ certificates: [
+ {
+ courseTitle: 'Course title',
+ description: 'Description of the certificate',
+ editing: false,
+ id: 1622146085,
+ isActive: false,
+ name: 'Name of the certificate',
+ signatories: [
+ {
+ id: 268550145,
+ name: 'name_sign',
+ organization: 'org',
+ signatureImagePath: '/asset-v1:org+101+101+type@asset+block@camera.png',
+ title: 'title_sign',
+ },
+ ],
+ version: 1,
+ },
+ ],
+ courseModes: ['honor', 'audit'],
+ hasCertificateModes: true,
+ isActive: false,
+ isGlobalStaff: true,
+ mfeProctoredExamSettingsUrl: '',
+ courseNumber: 'DemoX',
+ courseTitle: 'Demonstration Course',
+ courseNumberOverride: 'Course Number Display String',
+};
diff --git a/src/certificates/__mocks__/index.js b/src/certificates/__mocks__/index.js
new file mode 100644
index 0000000000..1dffc371b8
--- /dev/null
+++ b/src/certificates/__mocks__/index.js
@@ -0,0 +1,3 @@
+export { default as certificatesDataMock } from './certificatesData';
+export { default as signatoriesMock } from './signatories';
+export { default as certificatesMock } from './certificates';
diff --git a/src/certificates/__mocks__/signatories.js b/src/certificates/__mocks__/signatories.js
new file mode 100644
index 0000000000..8deb4abe6e
--- /dev/null
+++ b/src/certificates/__mocks__/signatories.js
@@ -0,0 +1,8 @@
+module.exports = [
+ {
+ id: '1', name: 'John Doe', title: 'CEO', organization: 'Company', signatureImagePath: '/path/to/signature1.png',
+ },
+ {
+ id: '2', name: 'Jane Doe', title: 'CFO', organization: 'Company 2', signatureImagePath: '/path/to/signature2.png',
+ },
+];
diff --git a/src/certificates/certificate-create-form/CertificateCreateForm.jsx b/src/certificates/certificate-create-form/CertificateCreateForm.jsx
new file mode 100644
index 0000000000..70aa7ad4d0
--- /dev/null
+++ b/src/certificates/certificate-create-form/CertificateCreateForm.jsx
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { Card, Stack, Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Formik, Form, FieldArray } from 'formik';
+
+import CertificateDetailsForm from '../certificate-details/CertificateDetailsForm';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import { defaultCertificate } from '../constants';
+import messages from '../messages';
+import useCertificateCreateForm from './hooks/useCertificateCreateForm';
+
+const CertificateCreateForm = ({ courseId }) => {
+ const intl = useIntl();
+ const {
+ courseTitle, handleCertificateSubmit, handleFormCancel,
+ } = useCertificateCreateForm(courseId);
+
+ return (
+
+ {({
+ values, handleChange, handleBlur, resetForm, setFieldValue,
+ }) => (
+
+ )}
+
+ );
+};
+
+CertificateCreateForm.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default CertificateCreateForm;
diff --git a/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx b/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx
new file mode 100644
index 0000000000..1217c16d2a
--- /dev/null
+++ b/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx
@@ -0,0 +1,156 @@
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { getCertificatesApiUrl, getCertificateApiUrl } from '../data/api';
+import { fetchCertificates, createCourseCertificate } from '../data/thunks';
+import { certificatesDataMock } from '../__mocks__';
+import detailsMessages from '../certificate-details/messages';
+import signatoryMessages from '../certificate-signatories/messages';
+import messages from '../messages';
+import CertificateCreateForm from './CertificateCreateForm';
+
+const courseId = 'course-123';
+let store;
+let axiosMock;
+
+const renderComponent = () => render(
+
+
+
+
+ ,
+);
+
+const initialState = {
+ certificates: {
+ certificatesData: {
+ certificates: [],
+ hasCertificateModes: true,
+ },
+ componentMode: MODE_STATES.create,
+ },
+};
+
+describe('CertificateCreateForm', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore(initialState);
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, {
+ ...certificatesDataMock,
+ certificates: [],
+ });
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+ });
+
+ it('renders with empty fields', () => {
+ const { getByPlaceholderText } = renderComponent();
+
+ expect(getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage).value).toBe('');
+ expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage).value).toBe('');
+ expect(getByPlaceholderText(signatoryMessages.titlePlaceholder.defaultMessage).value).toBe('');
+ expect(getByPlaceholderText(signatoryMessages.organizationPlaceholder.defaultMessage).value).toBe('');
+ expect(getByPlaceholderText(signatoryMessages.imagePlaceholder.defaultMessage).value).toBe('');
+ });
+
+ it('creates a new certificate', async () => {
+ const courseTitleOverrideValue = 'Create Course Title';
+ const signatoryNameValue = 'Create signatory name';
+ const newCertificateData = {
+ ...certificatesDataMock,
+ courseTitle: courseTitleOverrideValue,
+ certificates: [{
+ ...certificatesDataMock.certificates[0],
+ signatories: [{
+ ...certificatesDataMock.certificates[0].signatories[0],
+ name: signatoryNameValue,
+ }],
+ }],
+ };
+
+ const { getByPlaceholderText, getByRole, getByDisplayValue } = renderComponent();
+
+ userEvent.type(
+ getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage),
+ courseTitleOverrideValue,
+ );
+ userEvent.type(
+ getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage),
+ signatoryNameValue,
+ );
+ userEvent.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
+
+ axiosMock.onPost(
+ getCertificateApiUrl(courseId),
+ ).reply(200, newCertificateData);
+ await executeThunk(createCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+ await waitFor(() => {
+ expect(getByDisplayValue(courseTitleOverrideValue)).toBeInTheDocument();
+ expect(getByDisplayValue(signatoryNameValue)).toBeInTheDocument();
+ });
+ });
+
+ it('cancel certificates creation', async () => {
+ const { getByRole } = renderComponent();
+ userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+ await waitFor(() => {
+ expect(store.getState().certificates.componentMode).toBe(MODE_STATES.noCertificates);
+ });
+ });
+
+ it('there is no delete signatory button if signatories length is less then 2', async () => {
+ const { queryAllByRole } = renderComponent();
+ const deleteIcons = queryAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+ await waitFor(() => {
+ expect(deleteIcons.length).toBe(0);
+ });
+ });
+
+ it('add and delete signatory', async () => {
+ const {
+ getAllByRole, queryAllByRole, getByText, getByRole,
+ } = renderComponent();
+
+ const addSignatoryBtn = getByText(signatoryMessages.addSignatoryButton.defaultMessage);
+
+ userEvent.click(addSignatoryBtn);
+
+ const deleteIcons = getAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+ await waitFor(() => {
+ expect(deleteIcons.length).toBe(2);
+ });
+
+ userEvent.click(deleteIcons[0]);
+
+ const confirModal = getByRole('dialog');
+ const deleteModalButton = within(confirModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+ userEvent.click(deleteIcons[0]);
+ userEvent.click(deleteModalButton);
+
+ await waitFor(() => {
+ expect(queryAllByRole('button', { name: messages.deleteTooltip.defaultMessage }).length).toBe(0);
+ });
+ });
+});
diff --git a/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx b/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx
new file mode 100644
index 0000000000..76174ca342
--- /dev/null
+++ b/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx
@@ -0,0 +1,28 @@
+import { useSelector, useDispatch } from 'react-redux';
+
+import { MODE_STATES } from '../../data/constants';
+import { getCourseTitle } from '../../data/selectors';
+import { setMode } from '../../data/slice';
+import { createCourseCertificate } from '../../data/thunks';
+
+const useCertificateCreateForm = (courseId) => {
+ const dispatch = useDispatch();
+ const courseTitle = useSelector(getCourseTitle);
+
+ const handleCertificateSubmit = (values) => {
+ const signatoriesWithoutIds = values.signatories.map(({ id, ...rest }) => rest);
+ const newValues = { ...values, signatories: signatoriesWithoutIds };
+ dispatch(createCourseCertificate(courseId, newValues));
+ };
+
+ const handleFormCancel = (resetForm) => {
+ dispatch(setMode(MODE_STATES.noCertificates));
+ resetForm();
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+ return {
+ courseTitle, handleCertificateSubmit, handleFormCancel,
+ };
+};
+
+export default useCertificateCreateForm;
diff --git a/src/certificates/certificate-details/CertificateDetails.jsx b/src/certificates/certificate-details/CertificateDetails.jsx
new file mode 100644
index 0000000000..38e9e39e6c
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetails.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+ Icon, Stack, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import {
+ EditOutline as EditOutlineIcon, DeleteOutline as DeleteOutlineIcon,
+} from '@openedx/paragon/icons';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import ModalNotification from '../../generic/modal-notification';
+import commonMessages from '../messages';
+import messages from './messages';
+import useCertificateDetails from './hooks/useCertificateDetails';
+
+const CertificateDetails = ({
+ certificateId,
+ detailsCourseTitle,
+ courseTitleOverride,
+ detailsCourseNumber,
+ courseNumberOverride,
+}) => {
+ const intl = useIntl();
+ const {
+ isConfirmOpen,
+ confirmOpen,
+ confirmClose,
+ isEditModalOpen,
+ editModalOpen,
+ editModalClose,
+ isCertificateActive,
+ handleEditAll,
+ handleDeleteCard,
+ } = useCertificateDetails(certificateId);
+
+ return (
+
+ {intl.formatMessage(commonMessages.editTooltip)}}
+ alt={intl.formatMessage(commonMessages.editTooltip)}
+ onClick={isCertificateActive ? editModalOpen : handleEditAll}
+ />
+ {intl.formatMessage(commonMessages.deleteTooltip)}}
+ alt={intl.formatMessage(commonMessages.deleteTooltip)}
+ onClick={confirmOpen}
+ />
+
+ )}
+ >
+
+
+
+ {intl.formatMessage(messages.detailsCourseTitle)}: {detailsCourseTitle}
+
+
+ {intl.formatMessage(messages.detailsCourseNumber)}: {detailsCourseNumber}
+
+
+
+ {courseTitleOverride && (
+
+ {intl.formatMessage(messages.detailsCourseTitleOverride)}: {courseTitleOverride}
+
+ )}
+ {courseNumberOverride && (
+
+ {intl.formatMessage(messages.detailsCourseNumberOverride)}: {courseNumberOverride}
+
+ )}
+
+
+ {
+ editModalClose();
+ handleEditAll();
+ }}
+ />
+ {
+ confirmClose();
+ handleDeleteCard();
+ }}
+ />
+
+ );
+};
+
+CertificateDetails.defaultProps = {
+ courseTitleOverride: '',
+ courseNumberOverride: '',
+};
+
+CertificateDetails.propTypes = {
+ certificateId: PropTypes.number.isRequired,
+ courseTitleOverride: PropTypes.string,
+ courseNumberOverride: PropTypes.string,
+ detailsCourseTitle: PropTypes.string.isRequired,
+ detailsCourseNumber: PropTypes.string.isRequired,
+};
+
+export default CertificateDetails;
diff --git a/src/certificates/certificate-details/CertificateDetails.test.jsx b/src/certificates/certificate-details/CertificateDetails.test.jsx
new file mode 100644
index 0000000000..2a96bfad9c
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetails.test.jsx
@@ -0,0 +1,118 @@
+import { Provider, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { deleteCourseCertificate } from '../data/thunks';
+import commonMessages from '../messages';
+import messages from './messages';
+import CertificateDetails from './CertificateDetails';
+
+let store;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const certificateId = 123;
+
+jest.mock('react-redux', () => ({
+ ...jest.requireActual('react-redux'),
+ useDispatch: jest.fn(),
+ useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: jest.fn(),
+}));
+
+jest.mock('../data/thunks', () => ({
+ deleteCourseCertificate: jest.fn(),
+}));
+
+const renderComponent = (props) => render(
+
+
+
+
+ ,
+);
+
+const defaultProps = {
+ componentMode: MODE_STATES.view,
+ detailsCourseTitle: 'Course Title',
+ detailsCourseNumber: 'Course Number',
+ handleChange: jest.fn(),
+ handleBlur: jest.fn(),
+};
+
+const initialState = {
+ certificates: {
+ certificatesData: {
+ certificates: [],
+ hasCertificateModes: false,
+ },
+ },
+};
+
+describe('CertificateDetails', () => {
+ let mockDispatch;
+
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore(initialState);
+ useParams.mockReturnValue({ courseId });
+ mockDispatch = jest.fn();
+ useDispatch.mockReturnValue(mockDispatch);
+ });
+
+ afterEach(() => {
+ useParams.mockClear();
+ mockDispatch.mockClear();
+ });
+
+ it('renders correctly in view mode', () => {
+ const { getByText } = renderComponent(defaultProps);
+
+ expect(getByText(messages.detailsSectionTitle.defaultMessage)).toBeInTheDocument();
+ expect(getByText(defaultProps.detailsCourseTitle)).toBeInTheDocument();
+ });
+
+ it('opens confirm modal on delete button click', () => {
+ const { getByRole, getByText } = renderComponent(defaultProps);
+ const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+ userEvent.click(deleteButton);
+
+ expect(getByText(messages.deleteCertificateConfirmationTitle.defaultMessage)).toBeInTheDocument();
+ });
+
+ it('dispatches delete action on confirm modal action', async () => {
+ const props = { ...defaultProps, courseId, certificateId };
+ const { getByRole } = renderComponent(props);
+ const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+ userEvent.click(deleteButton);
+
+ await waitFor(() => {
+ const confirmActionButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+ userEvent.click(confirmActionButton);
+ });
+
+ expect(mockDispatch).toHaveBeenCalledWith(deleteCourseCertificate(courseId, certificateId));
+ });
+
+ it('shows course title override in view mode', () => {
+ const courseTitleOverride = 'Overridden Title';
+ const props = { ...defaultProps, courseTitleOverride };
+ const { getByText } = renderComponent(props);
+
+ expect(getByText(courseTitleOverride)).toBeInTheDocument();
+ });
+});
diff --git a/src/certificates/certificate-details/CertificateDetailsForm.jsx b/src/certificates/certificate-details/CertificateDetailsForm.jsx
new file mode 100644
index 0000000000..2146361086
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetailsForm.jsx
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Stack, Form } from '@openedx/paragon';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import messages from './messages';
+
+const CertificateDetailsForm = ({
+ detailsCourseTitle,
+ courseTitleOverride,
+ handleChange,
+ handleBlur,
+}) => {
+ const intl = useIntl();
+ return (
+
+
+
+
+ {intl.formatMessage(messages.detailsCourseTitle)}: {detailsCourseTitle}
+
+
+
+
+ {intl.formatMessage(messages.detailsCourseTitleOverride)}
+
+
+ {intl.formatMessage(messages.detailsCourseTitleOverrideDescription)}
+
+
+
+
+
+ );
+};
+
+CertificateDetailsForm.propTypes = {
+ courseTitleOverride: PropTypes.string.isRequired,
+ detailsCourseTitle: PropTypes.string.isRequired,
+ handleChange: PropTypes.func.isRequired,
+ handleBlur: PropTypes.func.isRequired,
+};
+
+export default CertificateDetailsForm;
diff --git a/src/certificates/certificate-details/CertificateDetailsForm.test.jsx b/src/certificates/certificate-details/CertificateDetailsForm.test.jsx
new file mode 100644
index 0000000000..ee24865c6e
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetailsForm.test.jsx
@@ -0,0 +1,77 @@
+import { Provider } from 'react-redux';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import commonMessages from '../messages';
+import messages from './messages';
+import CertificateDetailsForm from './CertificateDetailsForm';
+
+let store;
+
+const renderComponent = (props) => render(
+
+
+
+
+ ,
+);
+
+const defaultProps = {
+ componentMode: MODE_STATES.view,
+ detailsCourseTitle: 'Course Title',
+ detailsCourseNumber: 'Course Number',
+ handleChange: jest.fn(),
+ handleBlur: jest.fn(),
+};
+
+const initialState = {
+ certificates: {
+ certificatesData: {
+ certificates: [],
+ hasCertificateModes: false,
+ },
+ },
+};
+
+describe('CertificateDetails', () => {
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore(initialState);
+ });
+
+ it('renders correctly in create mode', () => {
+ const { getByText, getByPlaceholderText } = renderComponent(defaultProps);
+
+ expect(getByText(messages.detailsSectionTitle.defaultMessage)).toBeInTheDocument();
+ expect(getByPlaceholderText(messages.detailsCourseTitleOverride.defaultMessage)).toBeInTheDocument();
+ });
+
+ it('handles input change in create mode', async () => {
+ const { getByPlaceholderText } = renderComponent(defaultProps);
+ const input = getByPlaceholderText(messages.detailsCourseTitleOverride.defaultMessage);
+ const newInputValue = 'New Title';
+
+ userEvent.type(input, newInputValue);
+
+ waitFor(() => {
+ expect(input.value).toBe(newInputValue);
+ });
+ });
+
+ it('does not show delete button in create mode', () => {
+ const { queryByRole } = renderComponent(defaultProps);
+
+ expect(queryByRole('button', { name: commonMessages.deleteTooltip.defaultMessage })).not.toBeInTheDocument();
+ });
+});
diff --git a/src/certificates/certificate-details/hooks/useCertificateDetails.jsx b/src/certificates/certificate-details/hooks/useCertificateDetails.jsx
new file mode 100644
index 0000000000..8e6adc92b5
--- /dev/null
+++ b/src/certificates/certificate-details/hooks/useCertificateDetails.jsx
@@ -0,0 +1,40 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { useToggle } from '@openedx/paragon';
+
+import { setMode } from '../../data/slice';
+import { deleteCourseCertificate } from '../../data/thunks';
+import { getIsCertificateActive } from '../../data/selectors';
+import { MODE_STATES } from '../../data/constants';
+
+const useCertificateDetails = (certificateId) => {
+ const dispatch = useDispatch();
+ const { courseId } = useParams();
+ const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+ const [isEditModalOpen, editModalOpen, editModalClose] = useToggle(false);
+ const isCertificateActive = useSelector(getIsCertificateActive);
+
+ const handleEditAll = () => {
+ dispatch(setMode(MODE_STATES.editAll));
+ };
+
+ const handleDeleteCard = () => {
+ if (certificateId) {
+ dispatch(deleteCourseCertificate(courseId, certificateId));
+ }
+ };
+
+ return {
+ isConfirmOpen,
+ confirmOpen,
+ confirmClose,
+ isEditModalOpen,
+ editModalOpen,
+ editModalClose,
+ isCertificateActive,
+ handleEditAll,
+ handleDeleteCard,
+ };
+};
+
+export default useCertificateDetails;
diff --git a/src/certificates/certificate-details/messages.js b/src/certificates/certificate-details/messages.js
new file mode 100644
index 0000000000..5385e5bd6f
--- /dev/null
+++ b/src/certificates/certificate-details/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ detailsSectionTitle: {
+ id: 'course-authoring.certificates.details.section.title',
+ defaultMessage: 'Certificate details',
+ },
+ detailsCourseTitle: {
+ id: 'course-authoring.certificates.details.course.title',
+ defaultMessage: 'Course title',
+ },
+ detailsCourseTitleOverride: {
+ id: 'course-authoring.certificates.details.course.title.override',
+ defaultMessage: 'Course title override',
+ },
+ detailsCourseTitleOverrideDescription: {
+ id: 'course-authoring.certificates.details.course.title.override.description',
+ defaultMessage: 'Specify an alternative to the official course title to display on certificates. Leave blank to use the official course title.',
+ },
+ detailsCourseNumber: {
+ id: 'course-authoring.certificates.details.course.number',
+ defaultMessage: 'Course number',
+ },
+ detailsCourseNumberOverride: {
+ id: 'course-authoring.certificates.details.course.number.override',
+ defaultMessage: 'Course number override',
+ },
+ deleteCertificateConfirmationTitle: {
+ id: 'course-authoring.certificates.details.confirm-modal',
+ defaultMessage: 'Delete this certificate?',
+ },
+ deleteCertificateMessage: {
+ id: 'course-authoring.certificates.details.confirm-modal.message',
+ defaultMessage: 'Deleting this certificate is permanent and cannot be undone.',
+ },
+ editCertificateConfirmationTitle: {
+ id: 'course-authoring.certificates.details.confirm.edit',
+ defaultMessage: 'Edit this certificate?',
+ },
+ editCertificateMessage: {
+ id: 'course-authoring.certificates.details.confirm.edit.message',
+ defaultMessage: 'This certificate has already been activated and is live. Are you sure you want to continue editing?',
+ },
+});
+
+export default messages;
diff --git a/src/certificates/certificate-edit-form/CertificateEditForm.jsx b/src/certificates/certificate-edit-form/CertificateEditForm.jsx
new file mode 100644
index 0000000000..89bdce28d9
--- /dev/null
+++ b/src/certificates/certificate-edit-form/CertificateEditForm.jsx
@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import { Card, Stack, Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Formik, Form, FieldArray } from 'formik';
+
+import ModalNotification from '../../generic/modal-notification';
+import CertificateDetailsForm from '../certificate-details/CertificateDetailsForm';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import commonMessages from '../messages';
+import messages from '../certificate-details/messages';
+import useCertificateEditForm from './hooks/useCertificateEditForm';
+
+const CertificateEditForm = ({ courseId }) => {
+ const intl = useIntl();
+ const {
+ confirmOpen,
+ courseTitle,
+ certificates,
+ confirmClose,
+ initialValues,
+ isConfirmOpen,
+ handleCertificateDelete,
+ handleCertificateSubmit,
+ handleCertificateUpdateCancel,
+ } = useCertificateEditForm(courseId);
+
+ return (
+ <>
+ {certificates.map((certificate, id) => (
+
+ {({
+ values, handleChange, handleBlur, resetForm, setFieldValue,
+ }) => (
+ <>
+
+ confirmClose()}
+ handleAction={() => {
+ confirmClose();
+ handleCertificateDelete(certificate.id);
+ }}
+ />
+
+ )}
+
+ ))}
+
+ );
+};
+
+CertificateEditForm.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default CertificateEditForm;
diff --git a/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx b/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx
new file mode 100644
index 0000000000..38757b3272
--- /dev/null
+++ b/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx
@@ -0,0 +1,140 @@
+import { Provider } from 'react-redux';
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { RequestStatus } from '../../data/constants';
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
+import { fetchCertificates, deleteCourseCertificate, updateCourseCertificate } from '../data/thunks';
+import { certificatesDataMock } from '../__mocks__';
+import { MODE_STATES } from '../data/constants';
+import messagesDetails from '../certificate-details/messages';
+import messages from '../messages';
+import CertificateEditForm from './CertificateEditForm';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = () => render(
+
+
+
+
+ ,
+);
+
+const initialState = {
+ certificates: {
+ certificatesData: {},
+ componentMode: MODE_STATES.editAll,
+ },
+};
+
+describe('CertificateEditForm Component', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore(initialState);
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, certificatesDataMock);
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+ });
+
+ it('submits the form with updated certificate details', async () => {
+ const courseTitleOverrideValue = 'Updated Course Title';
+ const signatoryNameValue = 'Updated signatory name';
+ const newCertificateData = {
+ ...certificatesDataMock,
+ courseTitle: courseTitleOverrideValue,
+ certificates: [{
+ ...certificatesDataMock.certificates[0],
+ signatories: [{
+ ...certificatesDataMock.certificates[0].signatories[0],
+ name: signatoryNameValue,
+ }],
+ }],
+ };
+
+ const { getByDisplayValue, getByRole, getByPlaceholderText } = renderComponent();
+
+ userEvent.type(
+ getByPlaceholderText(messagesDetails.detailsCourseTitleOverride.defaultMessage),
+ courseTitleOverrideValue,
+ );
+
+ userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+
+ axiosMock.onPost(
+ getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+ ).reply(200, newCertificateData);
+ await executeThunk(updateCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+ await waitFor(() => {
+ expect(getByDisplayValue(
+ certificatesDataMock.certificates[0].courseTitle + courseTitleOverrideValue,
+ )).toBeInTheDocument();
+ });
+ });
+
+ it('deletes a certificate and updates the store', async () => {
+ axiosMock.onDelete(
+ getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+ ).reply(200);
+
+ const { getByRole } = renderComponent();
+
+ userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+ const confirmDeleteModal = getByRole('dialog');
+ userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+ await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
+
+ await waitFor(() => {
+ expect(store.getState().certificates.certificatesData.certificates.length).toBe(0);
+ });
+ });
+
+ it('updates loading status if delete fails', async () => {
+ axiosMock.onDelete(
+ getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+ ).reply(404);
+
+ const { getByRole } = renderComponent();
+
+ userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+ const confirmDeleteModal = getByRole('dialog');
+ userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+ await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
+
+ await waitFor(() => {
+ expect(store.getState().certificates.savingStatus).toBe(RequestStatus.FAILED);
+ });
+ });
+
+ it('cancel edit form', async () => {
+ const { getByRole } = renderComponent();
+
+ expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
+
+ userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+ expect(store.getState().certificates.componentMode).toBe(MODE_STATES.view);
+ });
+});
diff --git a/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx b/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx
new file mode 100644
index 0000000000..3885f5cb0e
--- /dev/null
+++ b/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx
@@ -0,0 +1,62 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { useToggle } from '@openedx/paragon';
+
+import { MODE_STATES } from '../../data/constants';
+import { getCourseTitle, getCertificates } from '../../data/selectors';
+import { setMode } from '../../data/slice';
+import { updateCourseCertificate, deleteCourseCertificate } from '../../data/thunks';
+import { defaultCertificate } from '../../constants';
+
+const useCertificateEditForm = (courseId) => {
+ const dispatch = useDispatch();
+ const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+ const courseTitle = useSelector(getCourseTitle);
+ const certificates = useSelector(getCertificates);
+
+ const handleCertificateSubmit = (values) => {
+ const signatoriesWithoutLocalIds = values.signatories.map(signatory => {
+ if (signatory.id && typeof signatory.id === 'string' && signatory.id.startsWith('local-')) {
+ const { id, ...rest } = signatory;
+ return rest;
+ }
+ return signatory;
+ });
+
+ const newValues = {
+ ...values,
+ signatories: signatoriesWithoutLocalIds,
+ };
+
+ dispatch(updateCourseCertificate(courseId, newValues));
+ };
+
+ const handleCertificateUpdateCancel = (resetForm) => {
+ dispatch(setMode(MODE_STATES.view));
+ resetForm();
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ const handleCertificateDelete = (certificateId) => {
+ dispatch(deleteCourseCertificate(courseId, certificateId));
+ };
+
+ const initialValues = certificates.map((certificate) => ({
+ ...certificate,
+ courseTitle: certificate.courseTitle || defaultCertificate.courseTitle,
+ signatories: certificate.signatories || defaultCertificate.signatories,
+ }));
+
+ return {
+ confirmOpen,
+ courseTitle,
+ certificates,
+ confirmClose,
+ initialValues,
+ isConfirmOpen,
+ handleCertificateDelete,
+ handleCertificateSubmit,
+ handleCertificateUpdateCancel,
+ };
+};
+
+export default useCertificateEditForm;
diff --git a/src/certificates/certificate-section/CertificateSection.jsx b/src/certificates/certificate-section/CertificateSection.jsx
new file mode 100644
index 0000000000..05fab62e83
--- /dev/null
+++ b/src/certificates/certificate-section/CertificateSection.jsx
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Stack } from '@openedx/paragon';
+
+const CertificateSection = ({
+ title, actions, children, ...rest
+}) => (
+
+
+ {title}
+ {actions && actions}
+
+
+
+ {children}
+
+
+);
+
+CertificateSection.defaultProps = {
+ children: null,
+ actions: null,
+};
+CertificateSection.propTypes = {
+ children: PropTypes.node,
+ actions: PropTypes.node,
+ title: PropTypes.string.isRequired,
+};
+
+export default CertificateSection;
diff --git a/src/certificates/certificate-signatories/CertificateSignatories.jsx b/src/certificates/certificate-signatories/CertificateSignatories.jsx
new file mode 100644
index 0000000000..4cdf0f703a
--- /dev/null
+++ b/src/certificates/certificate-signatories/CertificateSignatories.jsx
@@ -0,0 +1,130 @@
+import PropTypes from 'prop-types';
+import { Stack, Button, Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import Signatory from './signatory/Signatory';
+import SignatoryForm from './signatory/SignatoryForm';
+import useEditSignatory from './hooks/useEditSignatory';
+import useCreateSignatory from './hooks/useCreateSignatory';
+import messages from './messages';
+
+const CertificateSignatories = ({
+ isForm,
+ editModes,
+ signatories,
+ arrayHelpers,
+ initialSignatoriesValues,
+ setFieldValue,
+ setEditModes,
+ handleBlur,
+ handleChange,
+}) => {
+ const intl = useIntl();
+
+ const {
+ toggleEditSignatory,
+ handleDeleteSignatory,
+ handleCancelUpdateSignatory,
+ } = useEditSignatory({
+ arrayHelpers, editModes, setEditModes, setFieldValue, initialSignatoriesValues,
+ });
+
+ const { handleAddSignatory } = useCreateSignatory({ arrayHelpers });
+
+ return (
+
+
+
+ {intl.formatMessage(messages.signatoriesRecommendation)}
+
+
+ {signatories.map(({
+ id, name, title, organization, signatureImagePath,
+ }, idx) => (
+ isForm || editModes[idx] ? (
+ 1 && !editModes[idx]}
+ handleDeleteSignatory={() => handleDeleteSignatory(idx)}
+ {...(editModes[idx] && {
+ handleCancelUpdateSignatory: () => handleCancelUpdateSignatory(idx),
+ })}
+ />
+ ) : (
+ toggleEditSignatory(idx)}
+ />
+ )
+ ))}
+
+ {isForm && (
+ <>
+
+
+ {intl.formatMessage(messages.addSignatoryButtonDescription)}
+
+
+ )}
+
+
+ {`${intl.formatMessage(messages.signatoryTitle)} ${index + 1}`}
+
+ {intl.formatMessage(messages.nameLabel)} {name}
+ {intl.formatMessage(messages.titleLabel)} {title}
+ {intl.formatMessage(messages.organizationLabel)} {organization}
+
+
+
+
{intl.formatMessage(commonMessages.editTooltip)}
+ {signatureImagePath && (
+
+ )}
+
+
+ );
+};
+
+Signatory.propTypes = {
+ name: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ organization: PropTypes.string.isRequired,
+ signatureImagePath: PropTypes.string.isRequired,
+ index: PropTypes.number.isRequired,
+ handleEdit: PropTypes.func.isRequired,
+};
+
+export default Signatory;
diff --git a/src/certificates/certificate-signatories/signatory/Signatory.test.jsx b/src/certificates/certificate-signatories/signatory/Signatory.test.jsx
new file mode 100644
index 0000000000..84f3194a61
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/Signatory.test.jsx
@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+
+import { signatoriesMock } from '../../__mocks__';
+import commonMessages from '../../messages';
+import messages from '../messages';
+import Signatory from './Signatory';
+
+const mockHandleEdit = jest.fn();
+
+const renderSignatory = (props) => render(
+
+
+ ,
+);
+
+const defaultProps = { ...signatoriesMock[0], handleEdit: mockHandleEdit, index: 0 };
+
+describe('Signatory Component', () => {
+ it('renders in MODE_STATES.view mode', () => {
+ const {
+ getByText, queryByText, getByAltText, getByRole,
+ } = renderSignatory(defaultProps);
+ const signatureImage = getByAltText(messages.imageLabel.defaultMessage);
+ const sectionTitle = getByRole('heading', { level: 3, name: `${messages.signatoryTitle.defaultMessage} ${defaultProps.index + 1}` });
+
+ expect(sectionTitle).toBeInTheDocument();
+ expect(getByText(defaultProps.name)).toBeInTheDocument();
+ expect(getByText(defaultProps.title)).toBeInTheDocument();
+ expect(getByText(defaultProps.organization)).toBeInTheDocument();
+ expect(signatureImage).toBeInTheDocument();
+ expect(signatureImage).toHaveAttribute('src', expect.stringContaining(defaultProps.signatureImagePath));
+ expect(queryByText(messages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
+ });
+
+ it('calls handleEdit when the edit button is clicked', () => {
+ const { getByRole } = renderSignatory(defaultProps);
+
+ const editButton = getByRole('button', { name: commonMessages.editTooltip.defaultMessage });
+ userEvent.click(editButton);
+
+ expect(mockHandleEdit).toHaveBeenCalled();
+ });
+});
diff --git a/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
new file mode 100644
index 0000000000..8452eaf4fd
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
@@ -0,0 +1,200 @@
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import {
+ Image, Icon, Stack, IconButtonWithTooltip, FormLabel, Form, Button, useToggle,
+} from '@openedx/paragon';
+import { DeleteOutline as DeleteOutlineIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import ModalDropzone from '../../../generic/modal-dropzone/ModalDropzone';
+import ModalNotification from '../../../generic/modal-notification';
+import { updateSavingImageStatus } from '../../data/slice';
+import commonMessages from '../../messages';
+import messages from '../messages';
+
+const SignatoryForm = ({
+ index,
+ name,
+ title,
+ isEdit,
+ handleBlur,
+ organization,
+ handleChange,
+ setFieldValue,
+ showDeleteButton,
+ signatureImagePath,
+ handleDeleteSignatory,
+ handleCancelUpdateSignatory,
+}) => {
+ const intl = useIntl();
+ const dispatch = useDispatch();
+ const [isOpen, open, close] = useToggle(false);
+ const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+
+ const handleImageUpload = (newImagePath) => {
+ setFieldValue(`signatories[${index}].signatureImagePath`, newImagePath);
+ };
+
+ const handleSavingStatusDispatch = (status) => {
+ dispatch(updateSavingImageStatus(status));
+ };
+
+ const formData = [
+ {
+ labelText: intl.formatMessage(messages.nameLabel),
+ value: name,
+ name: `signatories[${index}].name`,
+ placeholder: intl.formatMessage(messages.namePlaceholder),
+ feedback: intl.formatMessage(messages.nameDescription),
+ onChange: handleChange,
+ onBlur: handleBlur,
+ },
+ {
+ as: 'textarea',
+ labelText: intl.formatMessage(messages.titleLabel),
+ value: title,
+ name: `signatories[${index}].title`,
+ placeholder: intl.formatMessage(messages.titlePlaceholder),
+ feedback: intl.formatMessage(messages.titleDescription),
+ onChange: handleChange,
+ onBlur: handleBlur,
+ },
+ {
+ labelText: intl.formatMessage(messages.organizationLabel),
+ value: organization,
+ name: `signatories[${index}].organization`,
+ placeholder: intl.formatMessage(messages.organizationPlaceholder),
+ feedback: intl.formatMessage(messages.organizationDescription),
+ onChange: handleChange,
+ onBlur: handleBlur,
+ },
+ ];
+
+ const uploadReplaceText = intl.formatMessage(
+ messages.uploadImageButton,
+ {
+ uploadText: signatureImagePath
+ ? intl.formatMessage(messages.uploadModalReplace)
+ : intl.formatMessage(messages.uploadModal),
+ },
+ );
+
+ return (
+
+
+ {`${intl.formatMessage(messages.signatoryTitle)} ${index + 1}`}
+
+ {showDeleteButton && (
+ {intl.formatMessage(commonMessages.deleteTooltip)}
}
+ onClick={confirmOpen}
+ />
+ )}
+
+
+
+
+ {formData.map(({ labelText, feedback, ...rest }) => (
+
+ {labelText}
+
+
+ {feedback}
+
+
+ ))}
+
+ {intl.formatMessage(messages.imageLabel)}
+ {signatureImagePath && (
+
+ )}
+
+
+
+
+ {intl.formatMessage(messages.imageDescription)}
+
+
+
+
+
+
+ {isEdit && (
+
+
+
+
+ )}
+
+
+ {
+ confirmClose();
+ handleDeleteSignatory();
+ }}
+ />
+
+ );
+};
+
+SignatoryForm.defaultProps = {
+ isEdit: false,
+ handleChange: null,
+ handleBlur: null,
+ handleDeleteSignatory: null,
+ setFieldValue: null,
+ handleCancelUpdateSignatory: null,
+};
+
+SignatoryForm.propTypes = {
+ name: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ organization: PropTypes.string.isRequired,
+ showDeleteButton: PropTypes.bool.isRequired,
+ signatureImagePath: PropTypes.string.isRequired,
+ index: PropTypes.number.isRequired,
+ isEdit: PropTypes.bool,
+ handleChange: PropTypes.func,
+ handleBlur: PropTypes.func,
+ setFieldValue: PropTypes.func,
+ handleDeleteSignatory: PropTypes.func,
+ handleCancelUpdateSignatory: PropTypes.func,
+};
+
+export default SignatoryForm;
diff --git a/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx b/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx
new file mode 100644
index 0000000000..5ba99ab5ac
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx
@@ -0,0 +1,161 @@
+import { render, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../../store';
+import { signatoriesMock } from '../../__mocks__';
+import commonMessages from '../../messages';
+import messages from '../messages';
+import SignatoryForm from './SignatoryForm';
+
+let store;
+
+const renderSignatory = (props) => render(
+
+
+
+ ,
+ ,
+);
+
+const initialState = {
+ certificates: {
+ certificatesData: {
+ certificates: [],
+ hasCertificateModes: true,
+ },
+ },
+};
+
+const defaultProps = {
+ ...signatoriesMock[0],
+ showDeleteButton: true,
+ isEdit: true,
+ handleChange: jest.fn(),
+ handleBlur: jest.fn(),
+ setFieldValue: jest.fn(),
+ handleDeleteSignatory: jest.fn(),
+ handleCancelUpdateSignatory: jest.fn(),
+};
+
+describe('Signatory Component', () => {
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore(initialState);
+ });
+ it('renders in CREATE mode', () => {
+ const { queryByTestId, getByPlaceholderText } = renderSignatory(defaultProps);
+
+ expect(queryByTestId('signatory-view')).not.toBeInTheDocument();
+ expect(getByPlaceholderText(messages.namePlaceholder.defaultMessage)).toBeInTheDocument();
+ });
+
+ it('handles input change', async () => {
+ const handleChange = jest.fn();
+ const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
+ const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
+ const newInputValue = 'Jane Doe';
+
+ userEvent.type(input, newInputValue, { name: 'signatories[0].name' });
+
+ waitFor(() => {
+ expect(handleChange).toHaveBeenCalledWith(expect.anything());
+ expect(input.value).toBe(newInputValue);
+ });
+ });
+
+ it('opens image upload modal on button click', () => {
+ const { getByRole, queryByRole } = renderSignatory(defaultProps);
+ const replaceButton = getByRole(
+ 'button',
+ { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+ );
+
+ expect(queryByRole('presentation')).not.toBeInTheDocument();
+
+ userEvent.click(replaceButton);
+
+ expect(getByRole('presentation')).toBeInTheDocument();
+ });
+
+ it('shows confirm modal on delete icon click', async () => {
+ const { getByLabelText, getByText } = renderSignatory(defaultProps);
+ const deleteIcon = getByLabelText(commonMessages.deleteTooltip.defaultMessage);
+
+ userEvent.click(deleteIcon);
+
+ expect(getByText(messages.deleteSignatoryConfirmationMessage.defaultMessage)).toBeInTheDocument();
+ });
+
+ it('cancels deletion of a signatory', () => {
+ const { getByRole } = renderSignatory(defaultProps);
+
+ const deleteIcon = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+ userEvent.click(deleteIcon);
+
+ const cancelButton = getByRole('button', { name: commonMessages.cardCancel.defaultMessage });
+ userEvent.click(cancelButton);
+
+ expect(defaultProps.handleDeleteSignatory).not.toHaveBeenCalled();
+ });
+
+ it('renders without save button with isEdit=false', () => {
+ const { queryByRole } = renderSignatory({ ...defaultProps, isEdit: false });
+
+ const deleteIcon = queryByRole('button', { name: commonMessages.saveTooltip.defaultMessage });
+
+ expect(deleteIcon).not.toBeInTheDocument();
+ });
+
+ it('renders button with Replace text if there is a signatureImagePath', () => {
+ const newProps = {
+ ...defaultProps,
+ isEdit: false,
+ };
+
+ const { getByRole, queryByRole } = renderSignatory(newProps);
+
+ const replaceButton = getByRole(
+ 'button',
+ { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+ );
+ const uploadButton = queryByRole(
+ 'button',
+ { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModal.defaultMessage) },
+ );
+
+ expect(replaceButton).toBeInTheDocument();
+ expect(uploadButton).not.toBeInTheDocument();
+ });
+
+ it('renders button with Upload text if there is no signatureImagePath', () => {
+ const newProps = {
+ ...defaultProps,
+ signatureImagePath: '',
+ isEdit: false,
+ };
+
+ const { getByRole, queryByRole } = renderSignatory(newProps);
+
+ const uploadButton = getByRole(
+ 'button',
+ { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModal.defaultMessage) },
+ );
+ const replaceButton = queryByRole(
+ 'button',
+ { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+ );
+
+ expect(uploadButton).toBeInTheDocument();
+ expect(replaceButton).not.toBeInTheDocument();
+ });
+});
diff --git a/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx b/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx
new file mode 100644
index 0000000000..b502b1fdfd
--- /dev/null
+++ b/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx
@@ -0,0 +1,17 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Card } from '@openedx/paragon';
+
+import messages from '../messages';
+
+const CertificateWithoutModes = () => {
+ const intl = useIntl();
+ return (
+
+
+ {intl.formatMessage(messages.withoutModesText)}
+
+
+ );
+};
+
+export default CertificateWithoutModes;
diff --git a/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx b/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx
new file mode 100644
index 0000000000..f8f6deb6e6
--- /dev/null
+++ b/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx
@@ -0,0 +1,43 @@
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from '../messages';
+import WithoutModes from './CertificateWithoutModes';
+
+const courseId = 'course-123';
+let store;
+
+const renderComponent = (props) => render(
+
+
+
+
+ ,
+);
+
+describe('CertificateWithoutModes', () => {
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore();
+ });
+
+ it('renders correctly', async () => {
+ const { getByText, queryByText } = renderComponent();
+ await waitFor(() => {
+ expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+
+ expect(queryByText(messages.headingActionsPreview.defaultMessage)).not.toBeInTheDocument();
+ expect(queryByText(messages.headingActionsDeactivate.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/certificates/certificates-list/CertificatesList.jsx b/src/certificates/certificates-list/CertificatesList.jsx
new file mode 100644
index 0000000000..9e394c3e98
--- /dev/null
+++ b/src/certificates/certificates-list/CertificatesList.jsx
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import { Card, Stack } from '@openedx/paragon';
+import { Formik, Form, FieldArray } from 'formik';
+
+import CertificateDetails from '../certificate-details/CertificateDetails';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import useCertificatesList from './hooks/useCertificatesList';
+
+const CertificatesList = ({ courseId }) => {
+ const {
+ editModes,
+ courseTitle,
+ certificates,
+ courseNumber,
+ initialValues,
+ courseNumberOverride,
+ setEditModes,
+ handleSubmit,
+ } = useCertificatesList(courseId);
+
+ return (
+ <>
+ {certificates.map((certificate, idx) => (
+
+ {({
+ values, handleChange, handleBlur, setFieldValue,
+ }) => (
+
+ )}
+
+ ))}
+
+ );
+};
+
+CertificatesList.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default CertificatesList;
diff --git a/src/certificates/certificates-list/CertificatesList.test.jsx b/src/certificates/certificates-list/CertificatesList.test.jsx
new file mode 100644
index 0000000000..fcf3d253f7
--- /dev/null
+++ b/src/certificates/certificates-list/CertificatesList.test.jsx
@@ -0,0 +1,133 @@
+import { Provider } from 'react-redux';
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
+import { fetchCertificates, updateCourseCertificate } from '../data/thunks';
+import { certificatesMock, certificatesDataMock } from '../__mocks__';
+import signatoryMessages from '../certificate-signatories/messages';
+import messages from '../messages';
+import CertificatesList from './CertificatesList';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = () => render(
+
+
+
+
+ ,
+);
+
+describe('CertificatesList Component', () => {
+ beforeEach(async () => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
+ });
+ store = initializeStore();
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ axiosMock
+ .onGet(getCertificatesApiUrl(courseId))
+ .reply(200, {
+ ...certificatesDataMock,
+ certificates: certificatesMock,
+ });
+ await executeThunk(fetchCertificates(courseId), store.dispatch);
+ });
+
+ it('renders each certificate', () => {
+ const { getByText } = renderComponent();
+
+ certificatesMock.forEach((certificate) => {
+ certificate.signatories.forEach((signatory) => {
+ expect(getByText(signatory.name)).toBeInTheDocument();
+ expect(getByText(signatory.title)).toBeInTheDocument();
+ expect(getByText(signatory.organization)).toBeInTheDocument();
+ });
+ });
+ });
+
+ it('update certificate', async () => {
+ const {
+ getByText, queryByText, getByPlaceholderText, getByRole, getAllByLabelText,
+ } = renderComponent();
+
+ const signatoryNameValue = 'Updated signatory name';
+ const newCertificateData = {
+ ...certificatesDataMock,
+ certificates: [{
+ ...certificatesMock[0],
+ signatories: [{
+ ...certificatesMock[0].signatories[0],
+ name: signatoryNameValue,
+ }],
+ }],
+ };
+
+ const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
+
+ userEvent.click(editButtons[1]);
+
+ const nameInput = getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage);
+ userEvent.clear(nameInput);
+ userEvent.type(nameInput, signatoryNameValue);
+
+ userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+
+ axiosMock
+ .onPost(getUpdateCertificateApiUrl(courseId, certificatesMock.id))
+ .reply(200, newCertificateData);
+ await executeThunk(updateCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+ await waitFor(() => {
+ expect(getByText(newCertificateData.certificates[0].signatories[0].name)).toBeInTheDocument();
+ expect(queryByText(certificatesDataMock.certificates[0].signatories[0].name)).not.toBeInTheDocument();
+ });
+ });
+
+ it('toggle edit signatory', async () => {
+ const {
+ getAllByLabelText, queryByPlaceholderText, getByTestId, getByPlaceholderText,
+ } = renderComponent();
+ const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
+
+ expect(editButtons.length).toBe(3);
+
+ userEvent.click(editButtons[1]);
+
+ await waitFor(() => {
+ expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).toBeInTheDocument();
+ });
+
+ userEvent.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+ await waitFor(() => {
+ expect(queryByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+
+ it('toggle certificate edit all', async () => {
+ const { getByTestId } = renderComponent();
+ const detailsSection = getByTestId('certificate-details');
+ const editButton = within(detailsSection).getByLabelText(messages.editTooltip.defaultMessage);
+ userEvent.click(editButton);
+
+ await waitFor(() => {
+ expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
+ });
+ });
+});
diff --git a/src/certificates/certificates-list/hooks/useCertificatesList.jsx b/src/certificates/certificates-list/hooks/useCertificatesList.jsx
new file mode 100644
index 0000000000..952fa8534a
--- /dev/null
+++ b/src/certificates/certificates-list/hooks/useCertificatesList.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { MODE_STATES } from '../../data/constants';
+import {
+ getCourseTitle, getCourseNumber, getCourseNumberOverride, getCertificates,
+} from '../../data/selectors';
+import { updateCourseCertificate } from '../../data/thunks';
+import { setMode } from '../../data/slice';
+import { defaultCertificate } from '../../constants';
+
+const useCertificatesList = (courseId) => {
+ const dispatch = useDispatch();
+ const certificates = useSelector(getCertificates);
+ const courseTitle = useSelector(getCourseTitle);
+ const courseNumber = useSelector(getCourseNumber);
+ const courseNumberOverride = useSelector(getCourseNumberOverride);
+
+ const [editModes, setEditModes] = useState({});
+
+ const initialValues = certificates.map((certificate) => ({
+ ...certificate,
+ courseTitle: certificate.courseTitle || defaultCertificate.courseTitle,
+ signatories: certificate.signatories || defaultCertificate.signatories,
+ }));
+
+ const handleSubmit = async (values) => {
+ await dispatch(updateCourseCertificate(courseId, values));
+ setEditModes({});
+ dispatch(setMode(MODE_STATES.view));
+ };
+
+ return {
+ editModes,
+ courseTitle,
+ certificates,
+ courseNumber,
+ initialValues,
+ courseNumberOverride,
+ setEditModes,
+ handleSubmit,
+ };
+};
+
+export default useCertificatesList;
diff --git a/src/certificates/constants.js b/src/certificates/constants.js
new file mode 100644
index 0000000000..49f31aefde
--- /dev/null
+++ b/src/certificates/constants.js
@@ -0,0 +1,13 @@
+import { v4 as uuid } from 'uuid';
+
+// eslint-disable-next-line import/prefer-default-export
+export const defaultCertificate = {
+ courseTitle: '',
+ signatories: [{
+ id: `local-${uuid()}`,
+ name: '',
+ title: '',
+ organization: '',
+ signatureImagePath: '',
+ }],
+};
diff --git a/src/certificates/data/api.js b/src/certificates/data/api.js
new file mode 100644
index 0000000000..989bf2ba70
--- /dev/null
+++ b/src/certificates/data/api.js
@@ -0,0 +1,89 @@
+/* eslint-disable import/prefer-default-export */
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { prepareCertificatePayload } from '../utils';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCertificatesApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/certificates/${courseId}`;
+export const getCertificateApiUrl = (courseId) => `${getApiBaseUrl()}/certificates/${courseId}`;
+export const getUpdateCertificateApiUrl = (courseId, certificateId) => `${getCertificateApiUrl(courseId)}/${certificateId}`;
+export const getUpdateCertificateActiveStatusApiUrl = (path) => `${getApiBaseUrl()}${path}`;
+
+/**
+ * Gets certificates for a course.
+ * @param {string} courseId
+ * @returns {Promise