Merge pull request #72 from ModusCreateOrg/ADE-60

feat: Add cancel notice functionality in UploadModal component

Author: GuidoBR

frontend/src/common/components/Upload/UploadModal.scss

@@ -357,4 +357,32 @@
     --background: rgba(0, 0, 0, 0.1);
     --progress-background: var(--ion-color-primary);
   }
+
+  // Fixing the cancel notice styles to match the design exactly
+  &__cancel-notice {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    background: rgba(41, 69, 196, 0.5); // Darker blue background matching design
+    padding: 12px 16px;
+    margin: 16px 0;
+    width: 100%;
+    border: 1px solid #FF9cb4; // Border matching the icon color
+    text-align: left;
+    
+    span {
+      color: white;
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+  
+  &__cancel-notice-icon {
+    color: #FF9cb4; // Using the danger color
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+  }
 }

frontend/src/common/components/Upload/UploadModal.tsx

@@ -28,6 +28,8 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
   const fileInputRef = useRef<HTMLInputElement>(null);
   // Track the upload result to use when the user closes the success screen
   const [uploadResult, setUploadResult] = useState<MedicalReport | null>(null);
+  // Track when to show the upload cancelled notice
+  const [showCancelNotice, setShowCancelNotice] = useState(false);
 
   const {
     file,
@@ -49,6 +51,8 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
   // Effect to automatically start upload when a file is selected and validated
   useEffect(() => {
     if (file && status === UploadStatus.IDLE) {
+      // When starting a new upload, hide the cancel notice if it's showing
+      setShowCancelNotice(false);
       uploadFile();
     }
   }, [file, status, uploadFile]);
@@ -71,6 +75,8 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
   const handleCancel = () => {
     if (status === UploadStatus.UPLOADING) {
       cancelUpload?.();
+      // Show the cancel notice when a user explicitly cancels an upload in progress
+      setShowCancelNotice(true);
     } else {
       reset();
       setUploadResult(null);
@@ -87,6 +93,7 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
     // Reset state
     reset();
     setUploadResult(null);
+    setShowCancelNotice(false);
 
     // Close modal
     onClose();
@@ -107,7 +114,18 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
             {t('upload.imageSizeLimit')} / {t('upload.pdfSizeLimit')}
           </p>
         </div>
-        {error && 
+        
+        {/* Show cancel notice */}
+        {showCancelNotice && (
+          <div className="upload-modal__cancel-notice">
+            <div className="upload-modal__cancel-notice-icon">
+              <FontAwesomeIcon icon={faCircleXmark} />
+            </div>
+            <span>Upload cancelled.</span>
+          </div>
+        )}
+        
+        {error && !showCancelNotice && 
           <IonItem className='upload-modal__error-message'>
             <div className='upload-modal__error-icon' slot='start'>
               <FontAwesomeIcon icon={faCircleXmark} aria-hidden="true"/>