@pega/react-sdk-components 23.1.10 → 23.1.12

package/lib/components/widget/Attachment/Attachment.js

@@ -1,42 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/jsx-boolean-value */
-import { Button } from '@material-ui/core';
-import React, { useState, useEffect } from 'react';
-import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '../../helpers/attachmentHelpers';
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
+import { useState, useEffect, useCallback } from 'react';
+import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import download from 'downloadjs';
+import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '../../helpers/attachmentHelpers';
+import { Utils } from '../../helpers/utils';
+import { isInfinity23OrHigher } from '../../helpers/common-utils';
 import './Attachment.css';
-import { CircularProgress } from "@material-ui/core";
-import download from "downloadjs";
-import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
-// NOTE: we can't use PConnProps in this file because the
-//  PConnect type is missing a number of expected properties
-//  such as attachmentsInfo and incorrect type for our use of clearMessages,
-// interface AttachmentProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-// }
-const getAttachmentKey = (name = '') => name ? `attachmentsList.${name}` : 'attachmentsList';
-function getCurrentAttachmentsList(key, context) {
+const getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
+const getCurrentAttachmentsList = (key, context) => {
     return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
-}
-export default function Attachment(props /* :AttachmentProps */) {
-    // Get emitted components from map (so we can get any override that may exist)
-    const SummaryList = getComponentFromMap('SummaryList');
-    const PCoreVersion = PCore.getPCoreVersion();
-    const { value, getPConnect, label, validatemessage } = props;
+};
+const updateAttachmentState = (pConn, key, attachments) => {
+    PCore.getStateUtils().updateState(pConn.getContextName(), key, attachments, {
+        pageReference: 'context_data',
+        isArrayDeepMerge: false
+    });
+};
+export default function Attachment(props) {
+    const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode } = props;
     /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
     let { required, disabled } = props;
     [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
-    let arFileList$ = [];
     const pConn = getPConnect();
     const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
-    let fileTemp = {};
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'CosmosFields';
+    const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
+    const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
     let categoryName = '';
     if (value && value.pyCategoryName) {
         categoryName = value.pyCategoryName;
     }
-    let valueRef = pConn.getStateProps()["value"];
+    const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
+    const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
+    let valueRef = pConn.getStateProps().value;
     valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
-    const [file, setFile] = useState(fileTemp);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [files, setFiles] = useState(() => value?.pxResults && +value.pyCount > 0 ? value.pxResults.map(f => buildFilePropsFromResponse(f)) : []);
+    const [filesWithError, setFilesWithError] = useState([]);
+    const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
     const resetAttachmentStoredState = () => {
-        PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), undefined, {
+        PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(isInfinity23OrHigher() ? valueRef : ''), undefined, {
             pageReference: 'context_data',
             isArrayDeepMerge: false
         });
@@ -45,361 +54,278 @@ export default function Attachment(props /* :AttachmentProps */) {
         const fileData = ext ? `${fileName}.${ext}` : fileName;
         download(atob(data), fileData);
     };
-    function _downloadFileFromList(fileObj) {
+    const downloadFile = (fileObj) => {
+        setAnchorEl(null);
         PCore.getAttachmentUtils()
+            // @ts-ignore - 3rd parameter "responseEncoding" should be optional
             .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
             .then((content) => {
-            const extension = fileObj.pyAttachName.split(".").pop();
+            const extension = fileObj.pyAttachName.split('.').pop();
             fileDownload(content.data, fileObj.pyFileName, extension);
         })
             .catch(() => { });
-    }
-    function setNewFiles(arFiles) {
-        let index = 0;
-        const maxAttachmentSize = 5;
-        for (const item of arFiles) {
-            if (!validateMaxSize(item, maxAttachmentSize.toString())) {
-                item.error = true;
-                item.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-            }
-            item.mimeType = item.type;
-            item.icon = getIconFromFileType(item.type);
-            item.ID = `${new Date().getTime()}I${index}`;
-            index += 1;
-        }
-        return arFiles;
-    }
-    function getFiles(arFiles) {
-        return setNewFiles(arFiles);
-    }
-    function getNewListUtilityItemProps({ att, cancelFile, downloadFile, deleteFile, removeFile }) {
-        let actions;
-        if (att.progress && att.progress !== 100) {
-            actions = [
-                {
-                    id: `Cancel-${att.ID}`,
-                    text: pConn.getLocalizedValue('Cancel', '', ''),
-                    icon: "times",
-                    onClick: cancelFile
-                }
-            ];
-        }
-        else if (att.links) {
-            const isFile = att.type === "FILE";
-            const ID = att.ID.replace(/\s/gi, "");
-            const actionsMap = new Map([
-                [
-                    "download",
-                    {
-                        id: `download-${ID}`,
-                        text: isFile ? pConn.getLocalizedValue('Download', '', '') : pConn.getLocalizedValue('Open', '', ''),
-                        icon: isFile ? "download" : "open",
-                        onClick: downloadFile
-                    }
-                ],
-                [
-                    "delete",
-                    {
-                        id: `Delete-${ID}`,
-                        text: pConn.getLocalizedValue('Delete', '', ''),
-                        icon: "trash",
-                        onClick: deleteFile
-                    }
-                ]
-            ]);
-            actions = [];
-            actionsMap.forEach((action, actionKey) => {
-                if (att.links[actionKey]) {
-                    actions.push(action);
+    };
+    const deleteFile = useCallback(file => {
+        setAnchorEl(null);
+        let attachmentsList = [];
+        let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+        // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
+        // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        if (value && value?.pxResults && +value?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
+            const updatedAttachments = files.map(f => {
+                if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
+                    return { ...f, delete: true, label: valueRef };
                 }
+                return f;
             });
+            // updating the redux store to help form-handler in passing the data to delete the file from server
+            updateAttachmentState(pConn, getAttachmentKey(valueRef), [...updatedAttachments]);
+            setFiles(current => {
+                const newlyAddedFiles = current.filter(f => !!f.ID);
+                const filesPostDelete = current.filter(f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey);
+                attachmentsList = [...filesPostDelete, ...newlyAddedFiles];
+                return attachmentsList;
+            });
+        } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
+        else {
+            // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated in below setFiles()
+            currentAttachmentList = currentAttachmentList.filter(f => f.label !== valueRef);
+            setFiles(current => {
+                attachmentsList = current.filter(f => f.ID !== file.ID);
+                return attachmentsList;
+            });
+            updateAttachmentState(pConn, getAttachmentKey(valueRef), [...currentAttachmentList, ...attachmentsList]);
+            if (file.inProgress) {
+                // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+                PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+            }
         }
-        else if (att.error) {
-            actions = [
-                {
-                    id: `Remove-${att.ID}`,
-                    text: pConn.getLocalizedValue('Remove', '', ''),
-                    icon: "trash",
-                    onClick: removeFile
-                }
-            ];
-        }
-        return {
-            id: att.ID,
-            visual: {
-                icon: getIconForAttachment(this, att),
-                progress: att.progress === 100 ? undefined : att.progress,
-            },
-            primary: {
-                type: att.type,
-                name: att.error ? att.fileName : att.name,
-                icon: "trash",
-                click: removeFile,
-            },
-            secondary: {
-                text: att.meta,
-                error: att.error
-            },
-            actions
-        };
-    }
-    ;
-    const onFileAdded = (event) => {
-        const addedFile = event.target.files[0];
-        setFile({
-            props: {
-                name: addedFile.name,
-                icon: getIconFromFileType(addedFile.type),
-            },
-            inProgress: true
+        setToggleUploadBegin(false);
+        setFilesWithError(prevFilesWithError => {
+            return prevFilesWithError.filter(f => f.ID !== file.ID);
         });
-        const arFiles$ = getFiles(event.target.files);
-        const myFiles = Array.from(arFiles$);
-        const onUploadProgress = () => { };
-        const errorHandler = (isFetchCanceled) => {
-            return (error) => {
-                if (!isFetchCanceled(error)) {
-                    let uploadFailMsg = pConn.getLocalizedValue('Something went wrong', '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-                    if (error.response && error.response.data && error.response.data.errorDetails) {
-                        uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-                    }
-                    myFiles[0].meta = uploadFailMsg;
-                    myFiles[0].error = true;
-                    myFiles[0].fileName = pConn.getLocalizedValue('Unable to upload file', '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-                    arFileList$ = myFiles.map((att) => {
-                        return getNewListUtilityItemProps({
-                            att,
-                            downloadFile: null,
-                            cancelFile: null,
-                            deleteFile: null,
-                            removeFile: null
-                        });
-                    });
-                    setFile((current) => {
-                        return {
-                            ...current,
-                            props: {
-                                ...current.props,
-                                arFileList$
-                            },
-                            inProgress: false,
-                            attachmentUploaded: true,
-                            showMenuIcon: false
-                        };
-                    });
+    }, [pConn, value, valueRef, filesWithError]);
+    const onUploadProgress = () => { };
+    const errorHandler = (isFetchCanceled, attachedFile) => {
+        return error => {
+            if (!isFetchCanceled(error)) {
+                let uploadFailMsg = pConn.getLocalizedValue('Something went wrong', '', '');
+                if (error.response && error.response.data && error.response.data.errorDetails) {
+                    uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', '');
                 }
-                throw error;
-            };
-        };
-        PCore.getAttachmentUtils()
-            .uploadAttachment(myFiles[0], onUploadProgress, errorHandler, pConn.getContextName())
-            .then((fileRes) => {
-            let reqObj;
-            if (PCoreVersion?.includes('8.7')) {
-                reqObj = {
-                    type: "File",
-                    attachmentFieldName: valueRef,
-                    category: categoryName,
-                    ID: fileRes.ID
-                };
-                pConn.attachmentsInfo = reqObj;
-            }
-            else {
-                reqObj = {
-                    type: "File",
-                    label: valueRef,
-                    category: categoryName,
-                    handle: fileRes.ID,
-                    ID: fileRes.clientFileID
-                };
-                const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter((f) => f.label !== valueRef);
-                PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), [...currentAttachmentList, reqObj], {
-                    pageReference: 'context_data',
-                    isArrayDeepMerge: false
+                setFiles(current => {
+                    return current.map(f => {
+                        if (f.ID === attachedFile.ID) {
+                            f.props.meta = uploadFailMsg;
+                            f.props.error = true;
+                            f.props.onDelete = () => deleteFile(f);
+                            f.props.icon = getIconFromFileType(f.type);
+                            f.props.name = pConn.getLocalizedValue('Unable to upload file', '', '');
+                            f.inProgress = false;
+                            const fieldName = pConn.getStateProps().value;
+                            const context = pConn.getContextName();
+                            // set errors to property to block submit even on errors in file upload
+                            PCore.getMessageManager().addMessages({
+                                // @ts-ignore
+                                messages: [
+                                    {
+                                        type: 'error',
+                                        message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                                    }
+                                ],
+                                property: fieldName,
+                                pageReference: pConn.getPageReference(),
+                                context
+                            });
+                            delete f.props.progress;
+                        }
+                        return f;
+                    });
                 });
             }
-            const fieldName = pConn.getStateProps()["value"];
-            const context = pConn.getContextName();
-            PCore.getMessageManager().clearMessages({
-                type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
-                property: fieldName,
-                pageReference: pConn.getPageReference(),
-                context
-            });
-            myFiles[0].meta = pConn.getLocalizedValue('Uploaded successfully', '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-            arFileList$ = myFiles.map((att) => {
-                return getNewListUtilityItemProps({
-                    att,
-                    downloadFile: null,
-                    cancelFile: null,
-                    deleteFile: null,
-                    removeFile: null
-                });
-            });
-            setFile((current) => {
-                return {
-                    ...current,
-                    props: {
-                        ...current.props,
-                        arFileList$
-                    },
-                    inProgress: false,
-                    attachmentUploaded: true,
-                    showMenuIcon: false
-                };
-            });
-        })
-            .catch(() => {
-            // just catching the rethrown error at uploadAttachment
-            // to handle Unhandled rejections
-        });
+            throw error;
+        };
     };
-    function _removeFileFromList(item, list) {
-        const arFileList = file.props ? file.props.arFileList$ : list;
-        const fileIndex = arFileList.findIndex(element => element?.id === item?.id);
-        if (PCoreVersion?.includes('8.7')) {
-            if (value) {
-                pConn.attachmentsInfo = {
-                    type: "File",
-                    attachmentFieldName: valueRef,
-                    delete: true
-                };
-            }
-            if (fileIndex > -1) {
-                arFileList.splice(parseInt(fileIndex, 10), 1);
-            }
-            ;
-            setFile((current) => {
-                return {
-                    ...current,
-                    props: {
-                        ...current.props,
-                        arFileList
-                    },
-                };
-            });
+    const validateFileExtension = (fileObj, allowedExtensions) => {
+        if (!allowedExtensions) {
+            return true;
         }
-        else {
-            const attachmentsList = [];
-            const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName()).filter((f) => f.label !== valueRef);
-            if (value && value.pxResults && +value.pyCount > 0) {
-                const deletedFile = {
-                    type: "File",
-                    label: valueRef,
-                    delete: true,
-                    responseProps: {
-                        pzInsKey: arFileList[fileIndex].id
-                    },
-                };
-                // updating the redux store to help form-handler in passing the data to delete the file from server
-                PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), [...currentAttachmentList, deletedFile], {
-                    pageReference: 'context_data',
-                    isArrayDeepMerge: false
-                });
-            }
-            else {
-                PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), [...currentAttachmentList, ...attachmentsList], {
-                    pageReference: 'context_data',
-                    isArrayDeepMerge: false
-                });
-            }
-            if (fileIndex > -1) {
-                arFileList.splice(parseInt(fileIndex, 10), 1);
-            }
-            ;
-            setFile((current) => {
-                return {
-                    ...current,
-                    props: {
-                        ...current.props,
-                        arFileList
-                    },
+        const allowedExtensionList = allowedExtensions
+            .toLowerCase()
+            .split(',')
+            .map(item => item.replaceAll('.', '').trim());
+        const extension = fileObj.name.split('.').pop().toLowerCase();
+        return allowedExtensionList.includes(extension);
+    };
+    const clearFieldErrorMessages = () => {
+        const fieldName = pConn.getStateProps().value;
+        const context = pConn.getContextName();
+        // @ts-ignore
+        PCore.getMessageManager().clearMessages({
+            type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+            property: fieldName,
+            pageReference: pConn.getPageReference(),
+            context
+        });
+    };
+    const onFileAdded = event => {
+        let addedFiles = Array.from(event.target.files);
+        addedFiles = allowMultiple === 'true' ? addedFiles : [addedFiles[0]];
+        const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || '5';
+        const tempFilesToBeUploaded = [
+            ...addedFiles.map((f, index) => {
+                f.ID = `${new Date().getTime()}I${index}`;
+                f.inProgress = true;
+                f.props = {
+                    type: f.type,
+                    name: f.name,
+                    icon: getIconFromFileType(f.type),
+                    onDelete: () => deleteFile(f)
                 };
-            });
-        }
-    }
-    useEffect(() => {
-        if (value && value.pxResults && +value.pyCount > 0) {
-            fileTemp = buildFilePropsFromResponse(value.pxResults[0]);
-            if (fileTemp.responseProps) {
-                if (!pConn.attachmentsInfo) {
-                    pConn.attachmentsInfo = {
-                        type: "File",
-                        attachmentFieldName: valueRef,
-                        category: categoryName
-                    };
+                if (!validateMaxSize(f, maxAttachmentSize)) {
+                    f.props.error = true;
+                    f.props.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
                 }
-                if (fileTemp.responseProps.pzInsKey && !fileTemp.responseProps.pzInsKey.includes("temp")) {
-                    fileTemp.props.type = fileTemp.responseProps.pyMimeFileExtension;
-                    fileTemp.props.mimeType = fileTemp.responseProps.pyMimeFileExtension;
-                    fileTemp.props.ID = fileTemp.responseProps.pzInsKey;
-                    // create the actions for the "more" menu on the attachment
-                    const arMenuList = [];
-                    let oMenu = {};
-                    oMenu.icon = "download";
-                    oMenu.text = pConn.getLocalizedValue('Download', '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-                    oMenu.onClick = () => { _downloadFileFromList(value.pxResults[0]); };
-                    arMenuList.push(oMenu);
-                    oMenu = {};
-                    oMenu.icon = "trash";
-                    oMenu.text = pConn.getLocalizedValue('Delete', '', ''); // 2nd and 3rd args empty string until typedef marked correctly
-                    oMenu.onClick = () => { _removeFileFromList(arFileList$[0], arFileList$); };
-                    arMenuList.push(oMenu);
-                    arFileList$.push(getNewListUtilityItemProps({
-                        att: fileTemp.props,
-                        downloadFile: null,
-                        cancelFile: null,
-                        deleteFile: null,
-                        removeFile: null
-                    }));
-                    arFileList$[0].actions = arMenuList;
-                    setFile((current) => {
-                        return {
-                            ...current,
-                            props: {
-                                ...current.props,
-                                arFileList$
-                            },
-                            inProgress: false,
-                            attachmentUploaded: true,
-                            showMenuIcon: true
-                        };
+                else if (!validateFileExtension(f, extensions)) {
+                    f.props.error = true;
+                    f.props.meta = `${pConn.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${extensions.replaceAll('.', '')}`;
+                }
+                if (f.props.error) {
+                    const fieldName = pConn.getStateProps().value;
+                    const context = pConn.getContextName();
+                    PCore.getMessageManager().addMessages({
+                        // @ts-ignore
+                        messages: [
+                            {
+                                type: 'error',
+                                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                            }
+                        ],
+                        property: fieldName,
+                        pageReference: pConn.getPageReference(),
+                        context
                     });
                 }
-                if (fileTemp) {
-                    const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), pConn.getContextName());
-                    const index = currentAttachmentList.findIndex(element => element.props.ID === fileTemp.props.ID);
-                    let tempFiles = [];
-                    if (index < 0) {
-                        tempFiles = [fileTemp];
-                    }
-                    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(PCoreVersion?.includes('8.23') ? valueRef : ''), [...currentAttachmentList, ...tempFiles], {
-                        pageReference: 'context_data',
-                        isArrayDeepMerge: false
+                return f;
+            })
+        ];
+        const tempFilesWithError = tempFilesToBeUploaded.filter(f => f.props.error);
+        if (tempFilesWithError.length > 0) {
+            setFilesWithError(tempFilesWithError);
+        }
+        setFiles(current => (allowMultiple !== 'true' ? [...tempFilesToBeUploaded] : [...current, ...tempFilesToBeUploaded]));
+        setToggleUploadBegin(true);
+    };
+    const uploadFiles = useCallback(() => {
+        const filesToBeUploaded = files
+            .filter(e => {
+            const isFileUploaded = e.props && e.props.progress === 100;
+            const fileHasError = e.props && e.props.error;
+            const isFileUploadedinLastStep = e.responseProps && e.responseProps.pzInsKey;
+            return !isFileUploaded && !fileHasError && !isFileUploadedinLastStep;
+        })
+            .map(f => window.PCore.getAttachmentUtils().uploadAttachment(f, () => {
+            onUploadProgress();
+        }, isFetchCanceled => {
+            return errorHandler(isFetchCanceled, f);
+        }, pConn.getContextName()));
+        Promise.allSettled(filesToBeUploaded)
+            .then((fileResponses) => {
+            fileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
+            if (fileResponses.length > 0) {
+                setFiles(current => {
+                    const tempFilesUploaded = [...current];
+                    tempFilesUploaded.forEach(f => {
+                        const index = fileResponses.findIndex((fr) => fr.value.clientFileID === f.ID);
+                        if (index >= 0) {
+                            f.props.meta = pConn.getLocalizedValue('Uploaded successfully', '', '');
+                            f.props.progress = 100;
+                            f.inProgress = false;
+                            f.handle = fileResponses[index].value.ID;
+                            f.label = valueRef;
+                            f.category = categoryName;
+                            f.responseProps = {
+                                pzInsKey: 'temp',
+                                pyAttachName: f.props.name
+                            };
+                        }
                     });
+                    return tempFilesUploaded;
+                });
+                if (filesWithError.length === 0) {
+                    clearFieldErrorMessages();
                 }
             }
+            setToggleUploadBegin(false);
+        })
+            .catch(error => {
+            // eslint-disable-next-line no-console
+            console.log(error);
+            setToggleUploadBegin(false);
+        });
+    }, [files, filesWithError]);
+    useEffect(() => {
+        if (toggleUploadBegin && files.length > 0) {
+            uploadFiles();
+        }
+    }, [toggleUploadBegin]);
+    useEffect(() => {
+        if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
+            const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+            // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
+            const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
+            const updatedAttList = [...currentAttachmentList, ...tempFiles];
+            updateAttachmentState(pConn, getAttachmentKey(valueRef), updatedAttList);
         }
+    }, [files]);
+    useEffect(() => {
+        if (filesWithError.length === 0) {
+            clearFieldErrorMessages();
+        }
+    }, [filesWithError]);
+    useEffect(() => {
+        let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+        tempUploadedFiles = tempUploadedFiles.filter(f => f.label === valueRef);
+        setFiles(current => {
+            return [
+                ...current.map(f => {
+                    return f.responseProps.pzInsKey && !f.responseProps.pzInsKey.includes('temp')
+                        ? {
+                            ...f,
+                            props: {
+                                ...f.props,
+                                onDelete: () => deleteFile(f)
+                            }
+                        }
+                        : { ...f };
+                }),
+                ...tempUploadedFiles
+            ];
+        });
         PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
         return () => {
             PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
         };
     }, []);
-    let content = (React.createElement("div", { className: `${validatemessage === '' ? 'file-div' : 'file-div-error'}` },
-        file.inProgress && (React.createElement("div", { className: "progress-div" },
-            React.createElement(CircularProgress, null))),
-        React.createElement("div", { hidden: true, id: "attachment-ID" }, valueRef),
-        React.createElement("label", { htmlFor: valueRef },
-            React.createElement("input", { style: { display: 'none' }, id: valueRef, name: 'upload-photo', type: 'file', required: required, onChange: onFileAdded }),
-            React.createElement(Button, { variant: 'outlined', color: 'primary', component: "span" }, "Upload file"))));
-    if (file && file.attachmentUploaded && file.props.arFileList$ && file.props.arFileList$.length > 0) {
-        content = (React.createElement("div", null,
-            file.showMenuIcon && (React.createElement(SummaryList, { "arItems$": file.props.arFileList$, "menuIconOverrideAction$": _removeFileFromList })),
-            !file.showMenuIcon && (React.createElement(SummaryList, { "menuIconOverride$": 'trash', "arItems$": file.props.arFileList$, "menuIconOverrideAction$": _removeFileFromList }))));
-    }
-    return (React.createElement("div", { className: 'file-upload-container' },
-        React.createElement("span", { className: `label ${required ? 'file-label' : ''}` }, label),
-        React.createElement("section", null, content),
-        validatemessage !== "" ? React.createElement("span", { className: 'file-error' }, validatemessage) : ''));
+    const handleClick = event => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const content = (_jsx("div", { style: { marginBottom: '8px' }, children: _jsxs("div", { className: `${disabled ? 'file-disabled' : ''} ${validatemessage === '' ? 'file-div' : 'file-div-error'}`, children: [_jsx("div", { hidden: true, id: 'attachment-ID', children: valueRef }), _jsxs("label", { htmlFor: valueRef, children: [_jsx("input", { style: { display: 'none' }, id: valueRef, name: 'upload-photo', type: 'file', multiple: allowMultiple === 'true', required: required, disabled: disabled, onChange: onFileAdded }), _jsx(Button, { style: { textTransform: 'none' }, variant: 'outlined', color: 'primary', component: 'span', children: allowMultiple === 'true'
+                                ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+                                    ? 'Choose files'
+                                    : uploadMultipleFilesLabel
+                                : uploadSingleFileLabel === 'file_upload_text_one'
+                                    ? 'Choose a file'
+                                    : uploadSingleFileLabel })] })] }) }));
+    const fileDisplay = (_jsx("div", { children: files &&
+            files.length > 0 &&
+            files.map((item, index) => {
+                return (_jsxs("div", { className: 'psdk-utility-card', children: [_jsxs("div", { className: 'psdk-utility-card-icon', children: [!item.inProgress && _jsx("img", { className: 'psdk-utility-card-svg-icon', src: srcImg }), item.inProgress && (_jsx("div", { children: _jsx(CircularProgress, {}) }))] }), _jsxs("div", { className: 'psdk-utility-card-main', children: [_jsx("div", { className: 'psdk-utility-card-main-primary-label', children: item.props.name }), item.props.meta && _jsx("div", { style: { color: item.props.error ? 'red' : undefined }, children: item.props.meta })] }), _jsxs("div", { className: 'psdk-utility-action', children: [item.ID && (_jsx("button", { type: 'button', className: 'psdk-utility-button', "aria-label": 'Delete Attachment', onClick: () => deleteFile(item), children: _jsx("img", { className: 'psdk-utility-card-action-svg-icon', src: deleteIcon }) })), !item.ID && (_jsxs("div", { children: [_jsx(IconButton, { id: 'setting-button', "aria-controls": open ? 'file-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', onClick: handleClick, children: _jsx(MoreVertIcon, {}) }), _jsxs(Menu, { style: { marginTop: '3rem' }, id: 'file-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: [_jsx(MenuItem, { style: { fontSize: '14px' }, onClick: () => downloadFile(item.responseProps ? item.responseProps : {}), children: "Download" }, 'download'), _jsx(MenuItem, { style: { fontSize: '14px' }, onClick: () => deleteFile(item), children: "Delete" }, 'delete')] })] }))] })] }, index));
+            }) }));
+    return (_jsxs("div", { className: 'file-upload-container', children: [_jsx("span", { className: `label ${required ? 'file-label' : ''}`, children: label }), ((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && _jsx("section", { children: content }), validatemessage !== '' ? _jsx("span", { className: 'file-error', children: validatemessage }) : '', files && files.length > 0 && _jsx("section", { children: fileDisplay })] }));
 }
 //# sourceMappingURL=Attachment.js.map