Merge pull request #4171 from JoinColony/fix/3715-advanced-payments-c…

…sv-error

Fix: Advanced payments file upload errors

src/components/v5/common/ActionSidebar/partials/ColonyDetailsFields/partials/ColonyAvatarField/ColonyAvatarField.tsx

@@ -125,7 +125,7 @@ const ColonyAvatarField: FC<ColonyAvatarFieldProps> = ({
               handleFileRemove={handleFileRemove}
               fileOptions={fileOptions}
               errorCode={avatarFileError}
-              isAvatarUploaded={!!modalValue}
+              isFileUploaded={!!modalValue}
             />
           </div>
         </div>

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/FileUploadModal/FileUploadModal.tsx

@@ -40,6 +40,7 @@ const FileUploadModal: FC<FileUploadModalProps> = ({
     handleFileRemove,
     progress,
     file,
+    previouslyAttemptedFileName,
   } = useUploadCSVFile(handleFileUpload);
 
   return (
@@ -99,7 +100,8 @@ const FileUploadModal: FC<FileUploadModalProps> = ({
             fileSize: '2MB',
           }}
           errorCode={fileError}
-          isAvatarUploaded={!!parsedFileValue}
+          fallbackFileName={previouslyAttemptedFileName}
+          isFileUploaded={!!parsedFileValue}
         />
       )}
       {progress === 100 && (

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/FileUploadModal/hooks.ts

@@ -1,5 +1,5 @@
 import Papa, { type ParseResult } from 'papaparse';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type FileRejection } from 'react-dropzone';
 
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
@@ -73,10 +73,18 @@ export const useUploadCSVFile = (
 ) => {
   const [progress, setProgress] = useState(0);
   const [file, setFile] = useState<FileReaderFile | undefined>();
+  const [previouslyAttemptedFileName, setPreviouslyAttemptedFileName] =
+    useState<string | undefined>();
   const [parsedFileValue, setParsedFileValue] =
     useState<ParseResult<ExpenditurePayoutFieldValue> | null>(null);
   const [fileError, setFileError] = useState<DropzoneErrors>();
 
+  useEffect(() => {
+    return () => {
+      setPreviouslyAttemptedFileName(undefined);
+    };
+  }, []);
+
   const handleFileRemove = async () => {
     setParsedFileValue(null);
     setFileError(undefined);
@@ -98,6 +106,7 @@ export const useUploadCSVFile = (
 
     try {
       setFile(uploadedFile);
+      setPreviouslyAttemptedFileName(uploadedFile.name);
 
       Papa.parse(uploadedFile.file, {
         complete: (result: ParseResult<CSVFileItem>) => {
@@ -110,7 +119,7 @@ export const useUploadCSVFile = (
 
           // Max number of payments is 400, but the format requires two header rows
           if (truncatedData.length > 402) {
-            setError(DropzoneErrors.STRUCTURE);
+            setError(DropzoneErrors.CONTENT_TOO_LARGE);
             return;
           }
 
@@ -168,6 +177,7 @@ export const useUploadCSVFile = (
     handleFileRemove,
     progress,
     file,
+    previouslyAttemptedFileName,
   };
 };
 

src/components/v5/common/AvatarUploader/AvatarUploader.tsx

@@ -61,7 +61,7 @@ const AvatarUploader: FC<AvatarUploaderProps & UseAvatarUploaderProps> = ({
     handleFileReject,
     handleFileRemove,
     errorCode: uploadAvatarError,
-    isAvatarUploaded,
+    isFileUploaded: isAvatarUploaded,
     isProgressContentVisible: showProgress,
     SuccessComponent,
   };

src/components/v5/common/AvatarUploader/partials/ErrorContent.tsx

@@ -4,7 +4,10 @@ import { useIntl } from 'react-intl';
 
 import { TextButton } from '~v5/shared/Button/index.ts';
 
-import { type ErrorContentProps } from '../types.ts';
+import {
+  type ErrorContentProps,
+  type FileUploadMessageValues,
+} from '../types.ts';
 import { DropzoneErrors, getErrorMessage } from '../utils.ts';
 
 const displayName = 'v5.common.AvatarUploader.partials.ErrorContent';
@@ -14,6 +17,7 @@ const ErrorContent: FC<ErrorContentProps> = ({
   handleFileRemove,
   open,
   processedFile,
+  fileOptions,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -34,7 +38,10 @@ const ErrorContent: FC<ErrorContentProps> = ({
       <div className="flex w-full flex-col gap-1">
         <div className="items-top flex justify-between gap-2">
           <span className=" text-left text-negative-400 text-1">
-            {formatMessage(errorMessage)}
+            {formatMessage(
+              errorMessage,
+              fileOptions as FileUploadMessageValues,
+            )}
           </span>
           <button
             type="button"

src/components/v5/common/AvatarUploader/partials/FileUpload.tsx

@@ -15,7 +15,8 @@ const FileUpload: FC<FileUploadProps> = ({
   handleFileReject,
   handleFileRemove,
   errorCode,
-  isAvatarUploaded,
+  fallbackFileName,
+  isFileUploaded,
   isProgressContentVisible,
   isSimplified,
   fileOptions,
@@ -43,7 +44,7 @@ const FileUpload: FC<FileUploadProps> = ({
 
   const shouldShowDefaultContent =
     (showDefault && !errorCode) ||
-    (!isAvatarUploaded && !errorCode && !isProgressContentVisible);
+    (!isFileUploaded && !errorCode && !isProgressContentVisible);
 
   const shouldShowSuccessContent = !shouldShowDefaultContent && !errorCode;
 
@@ -70,7 +71,8 @@ const FileUpload: FC<FileUploadProps> = ({
       errorCode={errorCode}
       handleFileRemove={handleFileRemove}
       open={open}
-      processedFile={processedFiles?.[0]?.name}
+      processedFile={processedFiles?.[0]?.name ?? fallbackFileName}
+      fileOptions={fileOptions}
     />
   );
 

src/components/v5/common/AvatarUploader/types.ts

@@ -16,7 +16,10 @@ export type SuccessContentProps = Pick<
 export type HandleFileAccept = (file: FileReaderFile) => void;
 
 export interface ErrorContentProps
-  extends Pick<FileUploadProps, 'handleFileRemove' | 'errorCode'> {
+  extends Pick<
+    FileUploadProps,
+    'handleFileRemove' | 'errorCode' | 'fileOptions'
+  > {
   processedFile?: string;
   open: () => void;
 }
@@ -27,10 +30,16 @@ export interface FileUploadOptions {
   fileDimension: string;
 }
 
+export interface FileUploadMessageValues extends FileUploadOptions {
+  [key: string]: any;
+}
+
 export interface FileUploadProps {
   dropzoneOptions: DropzoneOptions;
-  isAvatarUploaded: boolean;
+  isFileUploaded: boolean;
   errorCode?: DropzoneErrors;
+  // Used to display the filename if the file is rejected during the upload handler but not by dropzone.
+  fallbackFileName?: string;
   handleFileAccept: HandleFileAccept;
   handleFileReject?: (
     fileRejections: FileRejection[],

src/components/v5/common/AvatarUploader/utils.ts

@@ -30,6 +30,10 @@ const MSG = defineMessages({
     id: `${displayName}.customError`,
     defaultMessage: 'Upload failed, please try again',
   },
+  contentTooLarge: {
+    id: `${displayName}.contentTooLarge`,
+    defaultMessage: 'File exceeds {fileDimension}. Reduce and try again',
+  },
   wrongStructure: {
     id: `${displayName}.wrongStructure`,
     defaultMessage: 'File structure is incorrect, please try again',
@@ -40,7 +44,7 @@ const MSG = defineMessages({
   },
   fileMinDimensionsError: {
     id: `${displayName}.fileMinDimensionsError`,
-    defaultMessage: 'Image dimensions should be at least 120x120px',
+    defaultMessage: 'Image dimensions should be at least {fileDimension}',
   },
 });
 
@@ -54,6 +58,7 @@ export enum DropzoneErrors {
   TOO_LARGE = 'file-too-large',
   // TOO_SMALL = 'file-too-small', // wire in as needed
   // TOO_MANY = 'too-many-files',
+  CONTENT_TOO_LARGE = 'content-too-large',
   STRUCTURE = 'wrong-structure',
   CUSTOM = 'custom-error',
   DEFAULT = 'default',
@@ -77,6 +82,9 @@ export const getErrorMessage = (errorCode: DropzoneErrors) => {
     case DropzoneErrors.CUSTOM: {
       return MSG.customError;
     }
+    case DropzoneErrors.CONTENT_TOO_LARGE: {
+      return MSG.contentTooLarge;
+    }
     case DropzoneErrors.STRUCTURE: {
       return MSG.wrongStructure;
     }

src/i18n/en.json

@@ -1866,7 +1866,7 @@
     "milestoneModal.paymentCreatorDescription": "This will use your temporary permissions as the payment creator to immediately make the selected milestone payments.",
     "milestoneModal.multiSig": "This will start the approval process using multi-sig permissions to make the decision, for making the selected milestone payments.",
     "fileUploadModal.title": "Upload CSV",
-    "fileUploadModal.description": "Bulk upload recipients using a CSV. Use the template to ensure the correct structure, be sure to remove the sample data.",
+    "fileUploadModal.description": "Bulk upload up to 400 recipients using a CSV. Use the template to ensure the correct structure, be sure to remove the sample data.",
     "fileUploadModal.uploadFile": "Upload CSV File",
     "fileUploadModal.downloadTemplate": "Download .CSV template",
     "fileUploadModal.warningImportant": "Important: ",