fix: [AXIMST-517] certificates window scroll, modal title (#195)

Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>
raccoongang · Mar 1, 2024 · b450cea · b450cea
1 parent 6c8f4ca
commit b450cea
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git 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 (
     <div className="bg-light-200 p-2.5 signatory-form" data-testid="signatory-form">
       <Stack className="justify-content-between mb-4" direction="horizontal">
@@ -120,16 +129,7 @@ const SignatoryForm = ({
                 <span className="x-small">{intl.formatMessage(messages.imageDescription)}</span>
               </Form.Control.Feedback>
             </Stack>
-            <Button onClick={open}>
-              {intl.formatMessage(
-                messages.uploadImageButton,
-                {
-                  uploadText: signatureImagePath
-                    ? intl.formatMessage(messages.uploadModalReplace)
-                    : intl.formatMessage(messages.uploadModal),
-                },
-              )}
-            </Button>
+            <Button onClick={open}>{uploadReplaceText}</Button>
           </Stack>
         </Form.Group>
       </Stack>
@@ -155,7 +155,7 @@ const SignatoryForm = ({
         fileTypes={['png']}
         onSavingStatus={handleSavingStatusDispatch}
         imageHelpText={intl.formatMessage(messages.imageDescription)}
-        modalTitle={intl.formatMessage(messages.uploadImageButton)}
+        modalTitle={uploadReplaceText}
       />
       <ModalNotification
         isOpen={isConfirmOpen}

diff --git a/src/certificates/data/selectors.js b/src/certificates/data/selectors.js
@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 
 export const getLoadingStatus = (state) => 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
@@ -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
@@ -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) {