diff --git a/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
index c7f1b0bf49..8452eaf4fd 100644
--- a/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
+++ b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
@@ -9,7 +9,7 @@ import { getConfig } from '@edx/frontend-platform';
import ModalDropzone from '../../../generic/modal-dropzone/ModalDropzone';
import ModalNotification from '../../../generic/modal-notification';
-import { updateSavingStatus } from '../../data/slice';
+import { updateSavingImageStatus } from '../../data/slice';
import commonMessages from '../../messages';
import messages from '../messages';
@@ -37,7 +37,7 @@ const SignatoryForm = ({
};
const handleSavingStatusDispatch = (status) => {
- dispatch(updateSavingStatus(status));
+ dispatch(updateSavingImageStatus(status));
};
const formData = [
@@ -71,6 +71,15 @@ const SignatoryForm = ({
},
];
+ const uploadReplaceText = intl.formatMessage(
+ messages.uploadImageButton,
+ {
+ uploadText: signatureImagePath
+ ? intl.formatMessage(messages.uploadModalReplace)
+ : intl.formatMessage(messages.uploadModal),
+ },
+ );
+
return (
@@ -120,16 +129,7 @@ const SignatoryForm = ({
{intl.formatMessage(messages.imageDescription)}
-
+
@@ -155,7 +155,7 @@ const SignatoryForm = ({
fileTypes={['png']}
onSavingStatus={handleSavingStatusDispatch}
imageHelpText={intl.formatMessage(messages.imageDescription)}
- modalTitle={intl.formatMessage(messages.uploadImageButton)}
+ modalTitle={uploadReplaceText}
/>
state.certificates.loadingStatus;
export const getSavingStatus = (state) => state.certificates.savingStatus;
+export const getSavingImageStatus = (state) => state.certificates.savingImageStatus;
export const getSendRequestErrors = (state) => state.certificates.sendRequestErrors.developer_message;
export const getCertificates = state => state.certificates.certificatesData.certificates;
export const getHasCertificateModes = state => state.certificates.certificatesData.hasCertificateModes;
diff --git a/src/certificates/data/slice.js b/src/certificates/data/slice.js
index cf1f971357..204733c315 100644
--- a/src/certificates/data/slice.js
+++ b/src/certificates/data/slice.js
@@ -11,11 +11,15 @@ const slice = createSlice({
componentMode: MODE_STATES.noModes,
loadingStatus: RequestStatus.PENDING,
savingStatus: '',
+ savingImageStatus: '',
},
reducers: {
updateSavingStatus: (state, { payload }) => {
state.savingStatus = payload.status;
},
+ updateSavingImageStatus: (state, { payload }) => {
+ state.savingImageStatus = payload.status;
+ },
updateLoadingStatus: (state, { payload }) => {
state.loadingStatus = payload.status;
},
@@ -45,6 +49,7 @@ export const {
setMode,
updateSavingStatus,
updateLoadingStatus,
+ updateSavingImageStatus,
fetchCertificatesSuccess,
createCertificateSuccess,
updateCertificateSuccess,
diff --git a/src/certificates/layout/hooks/useLayout.jsx b/src/certificates/layout/hooks/useLayout.jsx
index 16f3c5dfca..e609a8ffb0 100644
--- a/src/certificates/layout/hooks/useLayout.jsx
+++ b/src/certificates/layout/hooks/useLayout.jsx
@@ -3,17 +3,18 @@ import { useSelector } from 'react-redux';
import { RequestStatus } from '../../../data/constants';
import { getProcessingNotification } from '../../../generic/processing-notification/data/selectors';
-import { getSavingStatus } from '../../data/selectors';
+import { getSavingStatus, getSavingImageStatus } from '../../data/selectors';
const useLayout = () => {
const savingStatus = useSelector(getSavingStatus);
+ const savingImageStatus = useSelector(getSavingImageStatus);
const {
isShow: isShowProcessingNotification,
title: processingNotificationTitle,
} = useSelector(getProcessingNotification);
- const isQueryPending = savingStatus === RequestStatus.PENDING;
- const isQueryFailed = savingStatus === RequestStatus.FAILED;
+ const isQueryPending = savingStatus === RequestStatus.PENDING || savingImageStatus === RequestStatus.PENDING;
+ const isQueryFailed = savingStatus === RequestStatus.FAILED || savingImageStatus === RequestStatus.FAILED;
useEffect(() => {
if (savingStatus === RequestStatus.SUCCESSFUL) {