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) {