@paro.io/expert-shared-components 1.12.41 → 1.12.43

package/lib/components/Escalations/EscalationChat.d.ts

@@ -1,6 +1,13 @@
-declare const EscalationChat: ({ activeChatIssue, showEscalationChat, setShowEscalationChat }: {
+declare const EscalationChat: ({ activeChatIssue, showEscalationChat, setShowEscalationChat, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, createProjectEscalation, isExpert, }: {
     activeChatIssue: any;
     showEscalationChat: boolean;
     setShowEscalationChat: (showEscalationChat: boolean) => void;
+    user: any;
+    createEscalationChatMessage: any;
+    documentUploadUrl: string;
+    bucketName: string;
+    uploadExpertClientFiles: string;
+    createProjectEscalation: string;
+    isExpert: boolean;
 }) => JSX.Element;
 export default EscalationChat;

package/lib/components/Escalations/EscalationChat.js

@@ -38,17 +38,81 @@ const base_ui_1 = require("@paro.io/base-ui");
 const core_1 = require("@material-ui/core");
 const DiscussionSection_1 = require("../Invoices/DiscussionSection");
 const EscalationIssueCard_1 = require("./EscalationIssueCard");
-const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalationChat }) => {
+const FileUploader_1 = require("../FileUploader");
+const EscalationRespondForm_1 = require("./EscalationRespondForm");
+const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalationChat, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, createProjectEscalation, isExpert, }) => {
+    var _a;
     const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
     const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
     const fileInputRef = (0, react_1.useRef)(null);
-    const handleFileUpload = (event) => {
-        const files = Array.from(event.target.files);
-        setUploadFiles(prev => [...prev, ...files]);
-    };
-    const removeFile = (index) => {
-        setUploadFiles(prev => prev.filter((_, i) => i !== index));
-    };
+    const handleFileUpload = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        const selectedFiles = event.target.files;
+        if (!selectedFiles)
+            return;
+        setUploadingFile(true);
+        const validFileNames = Array.from(selectedFiles)
+            .filter(file => (0, EscalationRespondForm_1.validateFileUpload)(file))
+            .map(file => file.name);
+        if (validFileNames.length === 0)
+            return;
+        if (validFileNames && validFileNames.length > 0) {
+            const uploadPromises = Array.from(selectedFiles).map((selectedFile) => {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onloadend = () => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
+                        try {
+                            const res = yield (0, FileUploader_1.fileUploader)({
+                                file: selectedFile,
+                                documentName: selectedFile.name,
+                                escalationId: activeChatIssue.escalationId,
+                                projectId: activeChatIssue.projectDetails.length > 0 ? activeChatIssue.projectDetails[0].projectId : '',
+                                documentUploadUrl: documentUploadUrl,
+                                bucketName: bucketName,
+                                isExpert: false,
+                                uploadExpertClientFiles: uploadExpertClientFiles,
+                                createProjectEscalation: createProjectEscalation,
+                                extraData: {
+                                    clientId: activeChatIssue.client.id,
+                                    clientName: activeChatIssue.client.name,
+                                    email: isExpert ? "client@gmail.com" : user === null || user === void 0 ? void 0 : user.email,
+                                    freelancerId: activeChatIssue.freelancer.id,
+                                    freelancerName: (_a = activeChatIssue.freelancer.name) !== null && _a !== void 0 ? _a : '',
+                                    projectName: activeChatIssue.projectDetails.length > 0 ? activeChatIssue.projectDetails[0].projectName : '',
+                                }
+                            });
+                            if (res) {
+                                setUploadFiles(prev => [...prev, ...res]);
+                            }
+                        }
+                        catch (error) {
+                            reject(error);
+                        }
+                        finally {
+                            resolve();
+                        }
+                    });
+                    reader.readAsDataURL(selectedFile);
+                });
+            });
+            try {
+                const res = yield Promise.all(uploadPromises);
+            }
+            catch (error) {
+                console.error('Error uploading files:', error);
+            }
+            finally {
+                setUploadingFile(false);
+            }
+        }
+        ;
+    });
+    const docs = [activeChatIssue.expertSupportingDocuments, activeChatIssue.clientSupportingDocuments, activeChatIssue.internalSupportingDocuments, ...uploadFiles];
+    const processedDocs = docs
+        .filter(doc => doc !== null && doc !== undefined && doc !== '')
+        .flatMap(doc => doc.split(','))
+        .map(doc => doc.trim())
+        .filter(doc => doc !== '');
     return (react_1.default.createElement(core_1.Dialog, { open: showEscalationChat, onClose: () => setShowEscalationChat(false), maxWidth: 'sm' },
         react_1.default.createElement(core_1.DialogTitle, null,
             react_1.default.createElement("div", { className: "text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
@@ -56,10 +120,10 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
                     react_1.default.createElement("div", { className: "flex flex-row items-center" },
                         react_1.default.createElement("h1", { className: "text-md font-bold mr-2" },
                             "Escalation Chat #",
-                            activeChatIssue.caseId),
+                            activeChatIssue.escalationNumber),
                         react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: activeChatIssue.status })),
                     react_1.default.createElement("p", { className: "text-xs" },
-                        activeChatIssue.title,
+                        activeChatIssue.probelm,
                         " - ",
                         activeChatIssue.project)),
                 react_1.default.createElement("div", { className: "flex items-center space-x-4" },
@@ -67,24 +131,17 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
                         react_1.default.createElement(base_icons_1.IconX, null))))),
         react_1.default.createElement(core_1.DialogContent, null,
             react_1.default.createElement("div", { className: "bg-white rounded-lg w-full overflow-hidden flex flex-col p-2 mt-12" },
-                react_1.default.createElement(DiscussionSection_1.DiscussionSection //update required
-                , { disputeId: '1', currentUser: {}, messages: [], onCreateMessage: (variables) => __awaiter(void 0, void 0, void 0, function* () {
-                        return Promise.resolve();
-                    }), isInternal: false }),
+                react_1.default.createElement(DiscussionSection_1.DiscussionSection, { escalationNumber: activeChatIssue.escalationNumber, currentUser: user, messages: (_a = activeChatIssue === null || activeChatIssue === void 0 ? void 0 : activeChatIssue.chatMessages) !== null && _a !== void 0 ? _a : [], onCreateMessage: createEscalationChatMessage, isInternal: false }),
+                processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                    react_1.default.createElement("span", { className: "text-sm font-bold text-gray-500 items-center" }, "Supporting Documents: "),
+                    processedDocs.map((d, idx) => (react_1.default.createElement(EscalationIssueCard_1.CustomTag, { key: idx, label: d.split('%2F')[1] }))))),
                 react_1.default.createElement("div", { className: "bg-white mt-2" },
                     react_1.default.createElement("div", { className: "space-y-3" },
                         react_1.default.createElement("div", { className: "flex items-center justify-between" },
                             react_1.default.createElement("div", { className: "flex items-center space-x-2" },
                                 react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", style: { display: 'none' }, ref: fileInputRef, onChange: handleFileUpload }),
-                                react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", className: "mx-2", isLoading: uploadingFile }),
-                                uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "text-sm text-gray-600" },
-                                    uploadFiles.length,
-                                    " file(s) selected"))),
+                                react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", className: "mx-2", isLoading: uploadingFile })),
                             react_1.default.createElement("div", { className: "flex space-x-2" },
-                                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: () => setShowEscalationChat(false) }))),
-                        uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "space-y-1" }, uploadFiles.map((file, index) => (react_1.default.createElement("div", { key: index, className: "flex items-center justify-between bg-gray-50 px-2 py-1 rounded text-sm" },
-                            react_1.default.createElement("span", null, file.name),
-                            react_1.default.createElement(core_1.IconButton, { onClick: () => removeFile(index) },
-                                react_1.default.createElement(base_icons_1.IconX, { size: "sm" })))))))))))));
+                                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: () => setShowEscalationChat(false), disabled: uploadingFile })))))))));
 };
 exports.default = EscalationChat;

package/lib/components/Escalations/EscalationIssueCard.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
-import { EscalationChatDetails } from "./EscalationTabsContent";
-export declare const CustomTag: ({ label }: {
+export declare const CustomTag: ({ label, iconLeft, onClick, }: {
     label: any;
+    iconLeft?: React.ReactNode;
+    onClick?: () => void;
 }) => React.JSX.Element;
 type EscalationIssueCardProps = {
     issues: any[];
     isExpert: boolean;
-    openEscalationChat: (details: EscalationChatDetails) => void;
+    openEscalationChat: (issue: any) => void;
     showRespondButton?: boolean;
     setSelectedIssueId?: (id: number) => void;
     showMarkResolvedButton?: boolean;
+    updateProjectEscalation: any;
+    downloadDocumentUrl: string;
+    bucketName: string;
 };
 declare const EscalationIssueCard: React.FC<EscalationIssueCardProps>;
 export default EscalationIssueCard;

package/lib/components/Escalations/EscalationIssueCard.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomTag = void 0;
 const react_1 = __importDefault(require("react"));
 const base_ui_1 = require("@paro.io/base-ui");
+const ClientDisputeProjectCard_1 = require("../Invoices/ClientDisputeProjectCard");
+const base_icons_1 = require("@paro.io/base-icons");
 const getBackgroundColor = (type) => {
     switch (type) {
         case 'Critical':
@@ -20,19 +22,27 @@ const getBackgroundColor = (type) => {
             return 'success';
     }
 };
-const CustomTag = ({ label }) => {
+const CustomTag = ({ label, iconLeft, onClick, }) => {
     const color = getBackgroundColor(label);
-    return (react_1.default.createElement("div", { className: `border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words text-white rounded-full bg-${color} border-${color} ml-2 font-bold` }, label.toUpperCase()));
+    return (react_1.default.createElement("div", { onClick: onClick, className: `flex flex-row gap-1 border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words text-white rounded-full bg-${color} border-${color} ml-2 font-bold ${onClick ? 'cursor-pointer' : ''}` },
+        iconLeft && react_1.default.createElement("span", null, iconLeft), label === null || label === void 0 ? void 0 :
+        label.toUpperCase()));
 };
 exports.CustomTag = CustomTag;
-const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespondButton = false, setSelectedIssueId, showMarkResolvedButton = false, }) => {
+const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespondButton = false, setSelectedIssueId, showMarkResolvedButton = false, updateProjectEscalation, downloadDocumentUrl, bucketName, }) => {
     if (!issues.length)
         return react_1.default.createElement("div", null, "No issues.");
     return (react_1.default.createElement("div", { className: "space-y-4" }, issues.map((issue) => {
-        const project = issue.projectName && Array.isArray(issue.projectName) && issue.projectName.length > 0
-            ? `${issue.projectName[0]}${issue.projectName.length > 1 ? ` +${issue.projectName.length - 1} more` : ''} `
+        var _a;
+        const project = issue.projectDetails && Array.isArray(issue.projectDetails) && issue.projectDetails.length > 0
+            ? `${(_a = issue.projectDetails[0]) === null || _a === void 0 ? void 0 : _a.projectName}${issue.projectDetails.length > 1 ? ` +${issue.projectDetails.length - 1} more` : ''} `
             : '';
-        const docs = [...issue.expertSupportingDocuments, ...issue.clientSupportingDocuments];
+        const docs = [issue.expertSupportingDocuments, issue.clientSupportingDocuments, issue.internalSupportingDocuments];
+        const processedDocs = docs
+            .filter(doc => doc !== null && doc !== undefined && doc !== '')
+            .flatMap(doc => doc.split(','))
+            .map(doc => doc.trim())
+            .filter(doc => doc !== '');
         return (react_1.default.createElement("div", { key: issue.id, className: "border border-gray-200 rounded-lg bg-white p-4" },
             react_1.default.createElement("div", { className: "flex items-center justify-between mb-3" },
                 react_1.default.createElement("div", { className: "flex-1 ml-2" },
@@ -42,29 +52,37 @@ const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespond
                     react_1.default.createElement("div", { className: "text-xs text-gray-500 font-bold" },
                         project,
                         " \u2022 Case #",
-                        issue.id)),
-                react_1.default.createElement(exports.CustomTag, { label: issue.issueType })),
+                        issue.escalationNumber)),
+                react_1.default.createElement(exports.CustomTag, { label: issue.escalationType })),
             react_1.default.createElement("div", { className: "bg-gray-50 rounded-md p-3 mb-4 border" },
                 react_1.default.createElement("div", { className: "flex items-center justify-between mb-2" },
                     react_1.default.createElement("div", { className: "text-sm text-gray-500" },
                         "Submitted by: ",
-                        react_1.default.createElement("span", { className: "font-bold" }, issue.submittedBy),
+                        react_1.default.createElement("span", { className: "font-bold" }, issue.submittedByUser.firstName + " " + issue.submittedByUser.lastName),
                         issue.createdAt && react_1.default.createElement(react_1.default.Fragment, null,
                             " \u2022 Submitted on: ",
                             react_1.default.createElement("span", { className: "font-bold" }, issue.createdAt)))),
-                react_1.default.createElement("div", { className: "text-sm text-gray-600 mb-3" }, issue.expectedOutcome),
-                docs && docs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                react_1.default.createElement("div", { className: "text-sm text-gray-600 mb-3" }, issue.outcome),
+                processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
                     react_1.default.createElement("span", { className: "text-sm font-bold text-gray-500 items-center" }, "Supporting Documents: "),
-                    docs.map((d, idx) => (react_1.default.createElement(exports.CustomTag, { key: idx, label: d })))))),
+                    processedDocs.map((d, idx) => (react_1.default.createElement(exports.CustomTag, { key: idx, label: d.split('%2F')[1], iconLeft: react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "xs" }), onClick: () => {
+                            (0, ClientDisputeProjectCard_1.handleDownloadDocument)(issue.escalationId, d.split('%2F')[1], downloadDocumentUrl, bucketName);
+                        } })))))),
             react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
-                react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
-                        title: issue.problem,
-                        project: issue.projectName,
-                        id: issue.id,
-                        status: issue.status
-                    }), label: "Chat", color: "primary" }),
-                showRespondButton && setSelectedIssueId && (react_1.default.createElement(base_ui_1.Button, { label: "Respond to Escalation", onClick: () => setSelectedIssueId(issue.id), color: 'primary' })),
-                showMarkResolvedButton && !isExpert && (react_1.default.createElement(base_ui_1.Button, { onClick: issue.markResolved, label: "Mark as Resolved", color: "primary" })))));
+                react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat(issue), label: "Chat", color: "primary" }),
+                showRespondButton && setSelectedIssueId && (react_1.default.createElement(base_ui_1.Button, { label: "Respond to Escalation", onClick: () => setSelectedIssueId(issue.escalationNumber), color: 'primary' })),
+                showMarkResolvedButton && !isExpert && (react_1.default.createElement(base_ui_1.Button, { onClick: () => {
+                        updateProjectEscalation({
+                            variables: {
+                                input: {
+                                    escalationNumber: issue.escalationNumber,
+                                    status: 'Resolved'
+                                }
+                            }
+                        }).then(() => { console.log("its marked as resolved"); }).catch((error) => {
+                            console.error("Error updating escalation status:", error);
+                        });
+                    }, label: "Mark as Resolved", color: "primary" })))));
     })));
 };
 exports.default = EscalationIssueCard;

package/lib/components/Escalations/EscalationRespondForm.d.ts

@@ -1,6 +1,14 @@
-declare const EscalationRespondForm: ({ goBack, selectedIssue, goHome }: {
+export declare const ACCEPTED_FILE_TYPES: string[];
+export declare const validateFileUpload: (file: File | null) => boolean;
+declare const EscalationRespondForm: ({ goBack, selectedIssue, documentUploadUrl, downloadDocumentUrl, uploadExpertClientFiles, updateProjectEscalation, bucketName, goHome, isExpert, }: {
     goBack: () => void;
     selectedIssue: any;
+    documentUploadUrl: string;
+    downloadDocumentUrl: string;
+    uploadExpertClientFiles: any;
+    updateProjectEscalation: any;
+    bucketName: string;
     goHome: () => void;
+    isExpert: boolean;
 }) => JSX.Element;
 export default EscalationRespondForm;

package/lib/components/Escalations/EscalationRespondForm.js

@@ -22,10 +22,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateFileUpload = exports.ACCEPTED_FILE_TYPES = void 0;
 const react_1 = __importStar(require("react"));
 const base_icons_1 = require("@paro.io/base-icons");
 const base_ui_1 = require("@paro.io/base-ui");
+const FileUploader_1 = require("../FileUploader");
+const EscalationIssueCard_1 = require("./EscalationIssueCard");
+exports.ACCEPTED_FILE_TYPES = [
+    'application/pdf',
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'image/jpeg',
+    'image/png',
+    'text/csv',
+];
+const validateFileUpload = (file) => {
+    if (!file) {
+        return false;
+    }
+    if (!exports.ACCEPTED_FILE_TYPES.includes(file.type)) {
+        return false;
+    }
+    return true;
+};
+exports.validateFileUpload = validateFileUpload;
 const responseTypes = [
     {
         label: "Acknowledge issue and provide resolution plan",
@@ -40,29 +70,106 @@ const responseTypes = [
     {
         label: "Request clarification",
         description: "Ask for more details about the issue",
-        value: "Clarification",
+        value: "NoResponse",
     },
 ];
-const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
+const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downloadDocumentUrl, uploadExpertClientFiles, updateProjectEscalation, bucketName, goHome, isExpert, }) => {
     const [selectedType, setSelectedType] = (0, react_1.useState)(responseTypes[0].value);
     const [responseInput, setResponseInput] = (0, react_1.useState)('');
     const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
     const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const fileInputRef = (0, react_1.useRef)(null);
-    const handleFileUpload = (event) => {
-        const files = Array.from(event.target.files);
-        setUploadFiles(prev => [...prev, ...files]);
-    };
-    const submitResponse = () => {
-        const responseData = {
-            responseType: selectedType,
-            responseText: responseInput,
-            uploadedFiles: uploadFiles.map(file => file.name),
-            selectedIssue: selectedIssue
-        };
-        console.log("Collected Response Data:", responseData);
-        goHome();
-    };
+    const handleFileUpload = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        const selectedFiles = event.target.files;
+        if (!selectedFiles)
+            return;
+        setUploadingFile(true);
+        const validFileNames = Array.from(selectedFiles)
+            .filter(file => (0, exports.validateFileUpload)(file))
+            .map(file => file.name);
+        if (validFileNames.length === 0)
+            return;
+        if (validFileNames && validFileNames.length > 0) {
+            const uploadPromises = Array.from(selectedFiles).map((selectedFile) => {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onloadend = () => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        try {
+                            const res = yield (0, FileUploader_1.fileUploader)({
+                                file: selectedFile,
+                                documentName: selectedFile.name,
+                                escalationId: selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.escalationId,
+                                projectId: selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.projectDetails[0].projectId,
+                                documentUploadUrl: documentUploadUrl,
+                                bucketName: bucketName,
+                                previousFiles: (selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.isExpert) ? (_a = selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.clientDocumentLinks) !== null && _a !== void 0 ? _a : [] : selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.expertDocumentlinks,
+                                isExpert: false,
+                                uploadExpertClientFiles: uploadExpertClientFiles,
+                                updateProjectEscalation: updateProjectEscalation,
+                                extraData: {
+                                    clientId: selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.client.id,
+                                    clientName: (_b = selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.client.name) !== null && _b !== void 0 ? _b : '',
+                                    email: isExpert ? (_d = (_c = selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.freelancer) === null || _c === void 0 ? void 0 : _c.email) !== null && _d !== void 0 ? _d : '' : (_g = (_f = (_e = selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.client) === null || _e === void 0 ? void 0 : _e.primaryContact) === null || _f === void 0 ? void 0 : _f.email) !== null && _g !== void 0 ? _g : '',
+                                    freelancerId: selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.freelancer.id,
+                                    freelancerName: (_h = selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.freelancer.name) !== null && _h !== void 0 ? _h : '',
+                                    projectName: selectedIssue === null || selectedIssue === void 0 ? void 0 : selectedIssue.projectDetails[0].projectName,
+                                }
+                            });
+                            if (res) {
+                                setUploadFiles(prev => [...prev, ...res]);
+                            }
+                        }
+                        catch (error) {
+                            reject(error);
+                        }
+                        finally {
+                            resolve();
+                        }
+                    });
+                    reader.readAsDataURL(selectedFile);
+                });
+            });
+            try {
+                yield Promise.all(uploadPromises);
+            }
+            catch (error) {
+                console.error('Error uploading files:', error);
+            }
+            finally {
+                setUploadingFile(false);
+            }
+        }
+        ;
+    });
+    const submitResponse = () => __awaiter(void 0, void 0, void 0, function* () {
+        setSubmitting(true);
+        try {
+            yield updateProjectEscalation({
+                variables: {
+                    input: {
+                        escalationId: selectedIssue.escalationId,
+                        [isExpert ? 'expertResponse' : 'clientResponse']: responseInput,
+                        [isExpert ? 'expertSupportingDocuments' : 'clientSupportingDocuments']: uploadFiles.join(", "),
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.error("Failed to send response!", error);
+        }
+        finally {
+            setSubmitting(false);
+            goHome();
+        }
+    });
+    const docs = [selectedIssue.expertSupportingDocuments, selectedIssue.clientSupportingDocuments, selectedIssue.internalSupportingDocuments, ...uploadFiles];
+    const processedDocs = docs
+        .filter(doc => doc !== null && doc !== undefined && doc !== '')
+        .flatMap(doc => doc.split(','))
+        .map(doc => doc.trim())
+        .filter(doc => doc !== '');
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("button", { onClick: goBack, className: "flex items-center text-blue-600 mb-6" },
             react_1.default.createElement(base_icons_1.IconChevronLeft, { size: "xs" }),
@@ -96,8 +203,9 @@ const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
                             react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" }, "Upload any supporting documentation"),
                             react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", style: { display: 'none' }, ref: fileInputRef, onChange: handleFileUpload }),
                             react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", className: "mx-2", isLoading: uploadingFile, size: "sm" }),
-                            uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "text-sm text-gray-600 mt-2" },
-                                react_1.default.createElement("ul", { className: "list-disc list-inside" }, uploadFiles.map((f) => (react_1.default.createElement("li", { key: f.name }, f.name)))))))),
+                            processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                                react_1.default.createElement("span", { className: "text-sm font-bold text-gray-500 items-center" }, "Supporting Documents: "),
+                                processedDocs.map((d, idx) => (react_1.default.createElement(EscalationIssueCard_1.CustomTag, { key: idx, label: d.split('%2F')[1] }))))))),
                     react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-md p-3" },
                         react_1.default.createElement("div", { className: "flex items-center" },
                             react_1.default.createElement(base_icons_1.IconInfoCircle, { size: "md" }),
@@ -105,7 +213,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
                                 react_1.default.createElement("p", { className: "font-medium" }, "Response Guidelines"),
                                 react_1.default.createElement("p", { className: "mt-1" }, "Your response will be visible to the client and Paro support team. Be professional and focus on resolution.")))),
                     react_1.default.createElement("div", { className: "flex justify-end space-x-3" },
-                        react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: goBack }),
-                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: submitResponse })))))));
+                        react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: goBack, disabled: uploadingFile || submitting }),
+                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: submitResponse, isLoading: submitting, disabled: uploadingFile })))))));
 };
 exports.default = EscalationRespondForm;

package/lib/components/Escalations/EscalationSubmitForm.d.ts

@@ -1,9 +1,14 @@
 interface EscalationSubmitProps {
     goBack: () => void;
     goHome: () => void;
-    experts: any[];
+    expertsOrClients: any[];
     projects: any[];
     isExpert: boolean;
+    documentUploadUrl: string;
+    bucketName: string;
+    uploadExpertClientFiles: any;
+    createProjectEscalation: any;
+    user: any;
 }
-declare const EscalationSubmitForm: ({ goBack, goHome, experts, projects, isExpert }: EscalationSubmitProps) => JSX.Element;
+declare const EscalationSubmitForm: ({ goBack, goHome, expertsOrClients, projects, documentUploadUrl, bucketName, uploadExpertClientFiles, createProjectEscalation, isExpert, user }: EscalationSubmitProps) => JSX.Element;
 export default EscalationSubmitForm;