@popsure/dirty-swan 0.57.9 → 0.58.1

package/src/lib/components/multiDropzone/utils/index.test.ts

@@ -1,53 +1,56 @@
 import { ErrorCode } from 'react-dropzone';
-import { 
+import {
   formatAcceptFileList,
   getErrorMessage,
-  getFormattedAcceptObject, 
-  getUploadStatus 
+  getFormattedAcceptObject,
+  getStatusMessage,
+  getUploadStatus,
 } from '.';
 
 const documentsAccept = {
   'application/msword': ['.doc'],
   'application/pdf': ['.pdf'],
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': [
+    '.docx',
+  ],
 };
 
 const imagesAccept = {
-  'image/heic': [".heic"],
-  'image/bmp': [".bmp"],
-  'image/jpeg': [".jpeg"],
-  'image/jpg': [".jpg"],
-  'image/png': [".png"],
-  'image/svg+xml': [".svg"],
-  'image/tiff': [".tiff"],
-  'image/webp': [".webp"]
+  'image/heic': ['.heic'],
+  'image/bmp': ['.bmp'],
+  'image/jpeg': ['.jpeg'],
+  'image/jpg': ['.jpg'],
+  'image/png': ['.png'],
+  'image/svg+xml': ['.svg'],
+  'image/tiff': ['.tiff'],
+  'image/webp': ['.webp'],
 };
 
 describe('getUploadStatus', () => {
   it('Should return error status if error is passed', () => {
-    expect(getUploadStatus(0, "Error message")).toEqual("ERROR");
+    expect(getUploadStatus(0, 'Error message')).toEqual('ERROR');
   });
 
   it("Should return uploading status if progress hasn't finished", () => {
-    expect(getUploadStatus(50)).toEqual("UPLOADING");
+    expect(getUploadStatus(50)).toEqual('UPLOADING');
   });
 
-  it("Should return complete status if progress has finished", () => {
-    expect(getUploadStatus(100)).toEqual("COMPLETE");
+  it('Should return complete status if progress has finished', () => {
+    expect(getUploadStatus(100)).toEqual('COMPLETE');
   });
 });
 
 describe('getFormattedAcceptObject', () => {
   it('Should return image accept object if is of type image', () => {
-    expect(getFormattedAcceptObject("image")).toEqual(imagesAccept);
+    expect(getFormattedAcceptObject('image')).toEqual(imagesAccept);
   });
 
   it('Should return documents accept object if is of type document', () => {
-    expect(getFormattedAcceptObject("document")).toEqual(documentsAccept);
+    expect(getFormattedAcceptObject('document')).toEqual(documentsAccept);
   });
 
   it('Should return accept object if it is manually defined', () => {
-    const accept = { "application/pdf": [".pdf"] };
+    const accept = { 'application/pdf': ['.pdf'] };
 
     expect(getFormattedAcceptObject(accept)).toEqual(accept);
   });
@@ -55,61 +58,141 @@ describe('getFormattedAcceptObject', () => {
 
 describe('formatAcceptFileList', () => {
   it('Should return empty object if accept is empty', () => {
-    expect(formatAcceptFileList({})).toEqual("");
+    expect(formatAcceptFileList({})).toEqual('');
   });
 
   it('Should return documents list if documents accept is passed', () => {
-    expect(formatAcceptFileList(documentsAccept)).toEqual("DOC, PDF, DOCX");
+    expect(formatAcceptFileList(documentsAccept)).toEqual('DOC, PDF, DOCX');
   });
 
   it('Should return images list if images accept is passed', () => {
-    expect(formatAcceptFileList(imagesAccept)).toEqual("HEIC, BMP, JPEG, JPG, PNG, SVG, TIFF, WEBP"); 
+    expect(formatAcceptFileList(imagesAccept)).toEqual(
+      'HEIC, BMP, JPEG, JPG, PNG, SVG, TIFF, WEBP'
+    );
   });
 
   it('Should return extension based on accept passed', () => {
-    const accept = { 
-      "application/pdf": [".pdf"],
-      "image/jpg": [".jpg"]
+    const accept = {
+      'application/pdf': ['.pdf'],
+      'image/jpg': ['.jpg'],
     };
 
-    expect(formatAcceptFileList(accept)).toEqual("PDF, JPG");
+    expect(formatAcceptFileList(accept)).toEqual('PDF, JPG');
   });
 });
 
 describe('getErrorMessage', () => {
   it('Should return default error message', () => {
-    const defaultMessage = "Default Error Message.";
+    const defaultMessage = 'Default Error Message.';
 
     expect(
-      getErrorMessage({
-        code: "UNKNOWN",
-        message: defaultMessage
-      }, { 
-        fileList: "" 
-      })
+      getErrorMessage(
+        {
+          code: 'UNKNOWN',
+          message: defaultMessage,
+        },
+        {
+          fileList: '',
+        }
+      )
     ).toEqual(defaultMessage);
   });
 
   it('Should return default FileInvalidType default message', () => {
-    const fileList = "JPG, PDF";
+    const fileList = 'JPG, PDF';
 
     expect(
-      getErrorMessage({
-        code: ErrorCode.FileInvalidType,
-        message: ""
-      }, { fileList })
+      getErrorMessage(
+        {
+          code: ErrorCode.FileInvalidType,
+          message: '',
+        },
+        { fileList }
+      )
     ).toEqual(`File type must be ${fileList}`);
   });
 
   it('Should return FileInvalidType with textOverride message', () => {
-    const fileTypeError = "File Invalid Error";
-    const fileList = "JPG, PDF";
-    
+    const fileTypeError = 'File Invalid Error';
+    const fileList = 'JPG, PDF';
+
     expect(
-      getErrorMessage({
-        code: ErrorCode.FileInvalidType,
-        message: ""
-      }, { fileList }, { fileTypeError })
+      getErrorMessage(
+        {
+          code: ErrorCode.FileInvalidType,
+          message: '',
+        },
+        { fileList },
+        { fileTypeError }
+      )
     ).toEqual(`${fileTypeError} ${fileList}`);
   });
 });
+
+describe('getStatusMessage', () => {
+  it('returns accepted file message for multiple files', () => {
+    const acceptedFiles = [
+      new File([''], 'photo.jpg'),
+      new File([''], 'invoice.pdf'),
+    ];
+
+    const result = getStatusMessage({
+      acceptedFiles,
+      filesRejected: [],
+      maxSize: 5000000,
+    });
+
+    expect(result).toBe('Files uploaded: photo.jpg, invoice.pdf.');
+  });
+
+  it('returns rejection message for invalid file type with default text', () => {
+    const filesRejected = [
+      {
+        file: new File([''], 'script.exe'),
+        errors: [
+          { code: ErrorCode.FileInvalidType, message: 'Invalid file type' },
+        ],
+      },
+    ];
+
+    const result = getStatusMessage({
+      acceptedFiles: [],
+      filesRejected,
+      maxSize: 5000000,
+      fileList: 'PDF, JPG',
+    });
+
+    expect(result).toBe(
+      'Could not upload script.exe: File type must be PDF, JPG.'
+    );
+  });
+
+  it('returns rejection message for file too large with default text', () => {
+    const filesRejected = [
+      {
+        file: new File([''], 'video.mov'),
+        errors: [{ code: ErrorCode.FileTooLarge, message: 'Too big' }],
+      },
+    ];
+
+    const result = getStatusMessage({
+      acceptedFiles: [],
+      filesRejected,
+      maxSize: 1048576,
+    });
+
+    expect(result).toBe(
+      'Could not upload video.mov: File is too large. It must be less than 1 MB.'
+    );
+  });
+
+  it('returns fallback when no files are accepted or rejected', () => {
+    const result = getStatusMessage({
+      acceptedFiles: [],
+      filesRejected: [],
+      maxSize: 1000000,
+    });
+
+    expect(result).toBe('');
+  });
+});

package/src/lib/components/multiDropzone/utils/index.ts

@@ -1,17 +1,20 @@
-import { Accept, ErrorCode, FileError } from "react-dropzone";
-import { formatBytes } from "../../../util/formatBytes";
-import { 
-  AcceptType, 
-  DOCUMENT_FILES, 
+import { Accept, ErrorCode, FileError, FileRejection } from 'react-dropzone';
+import { formatBytes } from '../../../util/formatBytes';
+import {
+  AcceptType,
+  DOCUMENT_FILES,
   FileMimeTypes,
   FileType,
-  IMAGE_FILES, 
+  IMAGE_FILES,
   TextOverrides,
   UploadStatus,
-  VIDEO_FILES
-} from "../types";
+  VIDEO_FILES,
+} from '../types';
 
-export const getUploadStatus = (progress: number, error?: string): UploadStatus => {
+export const getUploadStatus = (
+  progress: number,
+  error?: string
+): UploadStatus => {
   if (error) {
     return 'ERROR';
   }
@@ -23,7 +26,7 @@ export const getUploadStatus = (progress: number, error?: string): UploadStatus
   return 'COMPLETE';
 };
 
-const formatMimeType = (values: FileType[]): Accept  => {
+const formatMimeType = (values: FileType[]): Accept => {
   const formatedValues = {} as Accept;
 
   values.forEach((value) => {
@@ -36,17 +39,17 @@ const formatMimeType = (values: FileType[]): Accept  => {
 export const DOCUMENT_FILES_ACCEPT = formatMimeType(DOCUMENT_FILES);
 export const IMAGE_FILES_ACCEPT = formatMimeType(IMAGE_FILES);
 export const VIDEO_FILES_ACCEPT = formatMimeType(VIDEO_FILES);
-  
+
 export const getFormattedAcceptObject = (accept: AcceptType = {}): Accept => {
-  if (accept === "document") {
+  if (accept === 'document') {
     return DOCUMENT_FILES_ACCEPT;
-  };
+  }
 
-  if (accept === "image") {
+  if (accept === 'image') {
     return IMAGE_FILES_ACCEPT;
-  };
+  }
 
-  if (accept === "video") {
+  if (accept === 'video') {
     return VIDEO_FILES_ACCEPT;
   }
 
@@ -57,17 +60,16 @@ export const getFormattedAcceptObject = (accept: AcceptType = {}): Accept => {
   return {
     ...DOCUMENT_FILES_ACCEPT,
     ...IMAGE_FILES_ACCEPT,
-    ...VIDEO_FILES_ACCEPT
+    ...VIDEO_FILES_ACCEPT,
   };
-}
-  
-export const formatAcceptFileList = (accept: Accept): string => (
+};
+
+export const formatAcceptFileList = (accept: Accept): string =>
   Object.values(accept)
     .reduce((acc, value) => [...acc, ...value], [])
-    .join(", ")
+    .join(', ')
     .replace(/\./g, '')
-    .toUpperCase()
-);
+    .toUpperCase();
 
 export const getPlaceholder = (
   textOverrides?: TextOverrides,
@@ -78,28 +80,79 @@ export const getPlaceholder = (
     maxSize && maxSize > 0
       ? `${textOverrides?.sizeUpToText || 'up to'} ${formatBytes(maxSize)}`
       : '';
-  
-      const isAcceptString = 
-    typeof accept === 'string' && 
-    ['video', 'image', 'document'].includes(accept)
-  
-  const defaultPlaceholder = `${textOverrides?.supportsTextShort || 'Supports images, videos and documents'} ${maxSizePlaceholder}`;
-  const acceptPlaceholder = `${textOverrides?.supportsTextShort || `Supports ${accept}s ${maxSizePlaceholder}`}`;
+
+  const isAcceptString =
+    typeof accept === 'string' &&
+    ['video', 'image', 'document'].includes(accept);
+
+  const defaultPlaceholder = `${
+    textOverrides?.supportsTextShort || 'Supports images, videos and documents'
+  } ${maxSizePlaceholder}`;
+  const acceptPlaceholder = `${
+    textOverrides?.supportsTextShort ||
+    `Supports ${accept}s ${maxSizePlaceholder}`
+  }`;
 
   return isAcceptString ? acceptPlaceholder : defaultPlaceholder;
-}
+};
 
 export const getErrorMessage = (
   { code, message }: FileError,
-  { fileList = "", maxSize }: { fileList?: string, maxSize?: number },
-  textOverrides?: TextOverrides,
+  { fileList = '', maxSize }: { fileList?: string; maxSize?: number },
+  textOverrides?: TextOverrides
 ): string => {
   switch (code) {
     case ErrorCode.FileInvalidType:
-      return `${textOverrides?.fileTypeError || "File type must be"} ${fileList}`;
+      return `${
+        textOverrides?.fileTypeError || 'File type must be'
+      } ${fileList}`;
     case ErrorCode.FileTooLarge:
-      return `${textOverrides?.fileTooLargeError || "File is too large. It must be less than"} ${formatBytes(maxSize || 0)}.`;
+      return `${
+        textOverrides?.fileTooLargeError ||
+        'File is too large. It must be less than'
+      } ${formatBytes(maxSize || 0)}.`;
     default:
       return message;
   }
-}
+};
+
+export const getStatusMessage = ({
+  acceptedFiles,
+  filesRejected,
+  fileList,
+  maxSize,
+  textOverrides,
+}: {
+  acceptedFiles: File[];
+  filesRejected: FileRejection[];
+  fileList?: string;
+  maxSize?: number;
+  textOverrides?: TextOverrides;
+}): string => {
+  let message = '';
+  if (acceptedFiles.length > 0) {
+    const fileNames = acceptedFiles.map((file) => file.name).join(', ');
+    message += `File${
+      acceptedFiles.length > 1 ? 's' : ''
+    } uploaded: ${fileNames}. `;
+  }
+
+  if (filesRejected.length > 0) {
+    const rejectionMessages = filesRejected.map((rejection) => {
+      const firstError = rejection.errors[0];
+      const rejectionMessage = getErrorMessage(
+        firstError,
+        { fileList, maxSize },
+        textOverrides
+      );
+      return `Could not upload ${rejection.file.name}: ${
+        rejectionMessage.endsWith('.')
+          ? rejectionMessage
+          : `${rejectionMessage}.`
+      }`;
+    });
+
+    message += rejectionMessages.join('');
+  }
+  return message.trim();
+};