@paro.io/expert-shared-components 1.13.1 → 1.13.3

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

@@ -1,7 +1,7 @@
-declare const EscalationChat: ({ activeChatIssue, showEscalationChat, setShowEscalationChat, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, updateProjectEscalation, isExpert, }: {
+declare const EscalationChat: ({ activeChatIssue, showEscalationChat, onClose, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, updateProjectEscalation, isExpert, }: {
     activeChatIssue: any;
     showEscalationChat: boolean;
-    setShowEscalationChat: (showEscalationChat: boolean) => void;
+    onClose: () => void;
     user: any;
     createEscalationChatMessage: any;
     documentUploadUrl: string;

package/lib/components/Escalations/EscalationChat.js

@@ -40,7 +40,8 @@ const DiscussionSection_1 = require("../Invoices/DiscussionSection");
 const EscalationIssueCard_1 = require("./EscalationIssueCard");
 const FileUploader_1 = require("../FileUploader");
 const EscalationRespondForm_1 = require("./EscalationRespondForm");
-const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalationChat, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, updateProjectEscalation, isExpert, }) => {
+const utils_1 = require("../shared/utils");
+const EscalationChat = ({ activeChatIssue, showEscalationChat, onClose, user, createEscalationChatMessage, documentUploadUrl, bucketName, uploadExpertClientFiles, updateProjectEscalation, isExpert, }) => {
     var _a, _b, _c, _d;
     const [uploadFiles, setUploadFiles] = (0, react_1.useState)(isExpert
         ? (((_a = activeChatIssue === null || activeChatIssue === void 0 ? void 0 : activeChatIssue.expertSupportingDocuments) === null || _a === void 0 ? void 0 : _a.split(",")) || [])
@@ -108,15 +109,11 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
         }
     });
     const docs = [activeChatIssue.expertSupportingDocuments, activeChatIssue.clientSupportingDocuments, activeChatIssue.internalSupportingDocuments, ...uploadFiles];
-    const processedDocs = docs
-        .filter(doc => doc !== null && doc !== undefined && doc !== '' && doc !== "NULL")
-        .flatMap(doc => doc.split(','))
-        .map(doc => doc.trim())
-        .filter(doc => doc !== '' || doc !== "NULL");
+    const processedDocs = (0, utils_1.processDocs)(docs);
     const project = activeChatIssue.projectDetails && Array.isArray(activeChatIssue.projectDetails) && activeChatIssue.projectDetails.length > 0
         ? `${(_c = activeChatIssue.projectDetails[0]) === null || _c === void 0 ? void 0 : _c.projectName}${activeChatIssue.projectDetails.length > 1 ? ` +${activeChatIssue.projectDetails.length - 1} more` : ''} `
         : '';
-    return (react_1.default.createElement(core_1.Dialog, { open: showEscalationChat, onClose: () => setShowEscalationChat(false), maxWidth: 'sm' },
+    return (react_1.default.createElement(core_1.Dialog, { open: showEscalationChat, onClose: onClose, maxWidth: 'sm' },
         react_1.default.createElement(core_1.DialogTitle, null,
             react_1.default.createElement("div", { className: "text-black bg-white mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
                 react_1.default.createElement("div", { className: "flex flex-col items-start" },
@@ -130,14 +127,14 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
                         " \u2022 ",
                         project)),
                 react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(core_1.IconButton, { onClick: () => setShowEscalationChat(false) },
+                    react_1.default.createElement(core_1.IconButton, { onClick: onClose },
                         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, { escalationNumber: activeChatIssue.escalationNumber, currentUser: user, messages: (_d = activeChatIssue === null || activeChatIssue === void 0 ? void 0 : activeChatIssue.chatMessages) !== null && _d !== void 0 ? _d : [], onCreateMessage: createEscalationChatMessage, isInternal: false }),
                 processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mt-4 mb-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], customColor: "success" }))))),
+                    processedDocs.map((d, idx) => (react_1.default.createElement(EscalationIssueCard_1.CustomTag, { key: idx, label: d.split('%2F')[1], customColor: `bg-success border-success` }))))),
                 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" },
@@ -145,6 +142,6 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
                                 react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: false, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv,.xslx", 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 })),
                             react_1.default.createElement("div", { className: "flex space-x-2" },
-                                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: () => setShowEscalationChat(false), disabled: uploadingFile })))))))));
+                                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: onClose, disabled: uploadingFile })))))))));
 };
 exports.default = EscalationChat;

package/lib/components/Escalations/EscalationIssueCard.js

@@ -34,6 +34,7 @@ const base_icons_1 = require("@paro.io/base-icons");
 const dayjs_1 = __importDefault(require("dayjs"));
 const ViewResponseModal_1 = __importDefault(require("./ViewResponseModal"));
 const MarkResolvedModal_1 = __importDefault(require("./MarkResolvedModal"));
+const utils_1 = require("../shared/utils");
 const getBackgroundColor = (type) => {
     switch (type) {
         case 'Critical':
@@ -49,8 +50,9 @@ const getBackgroundColor = (type) => {
     }
 };
 const CustomTag = ({ label, iconLeft, onClick, customColor, }) => {
-    const color = customColor ? customColor : getBackgroundColor(label);
-    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-medium ${onClick ? 'cursor-pointer' : ''}` },
+    const getColor = getBackgroundColor(label);
+    const color = customColor ? customColor : `bg-${getColor} border-${getColor}`;
+    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 ${color} ml-2 font-medium ${onClick ? 'cursor-pointer' : ''}` },
         iconLeft && react_1.default.createElement("span", null, iconLeft), label === null || label === void 0 ? void 0 :
         label.toUpperCase()));
 };
@@ -60,23 +62,44 @@ const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespond
     const [viewResponseModal, setViewResponseModal] = (0, react_1.useState)(null);
     const [markAsResolved, setMarkAsResolved] = (0, react_1.useState)(null);
     const getResponseButtonText = (issue) => {
-        const hasResponse = isExpert ? issue.clientResponse : issue.expertResponse;
-        return hasResponse ? "View Response" : "Awaiting Response";
+        var _a;
+        const userTypeId = (_a = issue === null || issue === void 0 ? void 0 : issue.submittedByUser) === null || _a === void 0 ? void 0 : _a.userTypeId;
+        if (userTypeId === 3) { // Submitted by Client
+            if (isExpert) {
+                return "View Response";
+            }
+            else {
+                return issue.expertResponse ? "View Response" : "Awaiting Response";
+            }
+        }
+        if (userTypeId === 1) { // Submitted by Expert
+            if (isExpert) {
+                return issue.clientResponse ? "View Response" : "Awaiting Response";
+            }
+            else {
+                return "View Response";
+            }
+        }
+        if (userTypeId === 2) { // Submitted by Paro internal
+            if (isExpert) {
+                return issue.clientResponse ? "View Response" : "Awaiting Response";
+            }
+            else {
+                return issue.expertResponse ? "View Response" : "Awaiting Response";
+            }
+        }
+        return "Awaiting Response";
     };
     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) => {
-            var _a;
+            var _a, _b, _c, _d, _e;
             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, issue.internalSupportingDocuments];
-            const processedDocs = docs
-                .filter(doc => doc !== null && doc !== undefined && doc !== '' && doc !== "NULL")
-                .flatMap(doc => doc.split(','))
-                .map(doc => doc.trim())
-                .filter(doc => doc !== '' || doc !== "NULL");
+            const processedDocs = (0, utils_1.processDocs)(docs);
             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" },
@@ -84,31 +107,34 @@ const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespond
                             react_1.default.createElement("div", { className: "font-bold" }, issue.problem),
                             react_1.default.createElement(exports.CustomTag, { label: issue.severityLevel })),
                         react_1.default.createElement("div", { className: "text-xs text-gray-500 font-bold" },
+                            isExpert ? (_b = issue === null || issue === void 0 ? void 0 : issue.client) === null || _b === void 0 ? void 0 : _b.name : (_c = issue === null || issue === void 0 ? void 0 : issue.freelancer) === null || _c === void 0 ? void 0 : _c.name,
+                            " \u2022 ",
                             project,
                             " \u2022 Case #",
                             issue.escalationNumber)),
-                    react_1.default.createElement(exports.CustomTag, { label: issue.escalationType, customColor: isExpert ? 'neutral' : 'success' })),
+                    react_1.default.createElement(exports.CustomTag, { label: issue.escalationType, customColor: `bg-[#B0B5D3] border-[#181027]` })),
                 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.submittedByUser.firstName + " " + issue.submittedByUser.lastName),
-                            issue.createdAt && react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("span", { className: "font-bold" }, ((_d = issue === null || issue === void 0 ? void 0 : issue.submittedByUser) === null || _d === void 0 ? void 0 : _d.firstName) + " " + ((_e = issue === null || issue === void 0 ? void 0 : issue.submittedByUser) === null || _e === void 0 ? void 0 : _e.lastName)),
+                            (issue === null || issue === void 0 ? void 0 : issue.createdAt) && react_1.default.createElement(react_1.default.Fragment, null,
                                 " \u2022 Submitted on: ",
-                                react_1.default.createElement("span", { className: "font-bold" }, (0, dayjs_1.default)(issue.createdAt).format("MM-DD-YYYY"))))),
+                                react_1.default.createElement("span", { className: "font-bold" }, (0, dayjs_1.default)(issue === null || issue === void 0 ? void 0 : issue.createdAt).format("MM-DD-YYYY"))))),
                     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: "),
-                        processedDocs.map((d, idx) => (react_1.default.createElement(exports.CustomTag, { key: idx, customColor: "success", label: d.split('%2F')[1], iconLeft: react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "xs" }), onClick: () => {
+                        processedDocs.map((d, idx) => (react_1.default.createElement(exports.CustomTag, { key: idx, customColor: `bg-success border-success`, 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(issue), label: "Chat", color: "primary" }),
+                    react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat(issue.escalationNumber), 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 && (react_1.default.createElement(base_ui_1.Button, { label: getResponseButtonText(issue), onClick: () => { setViewResponseModal(issue); }, color: 'primary', disabled: getResponseButtonText(issue) === 'Awaiting Response' })),
-                    showMarkResolvedButton && !isExpert && (react_1.default.createElement(base_ui_1.Button, { onClick: () => { setMarkAsResolved(issue); }, label: "Mark as Resolved", color: "primary" })))));
+                    showMarkResolvedButton && !isExpert && issue.submittedByUser.userTypeId === 3 && ( // only client can resolve issue raised by client
+                    react_1.default.createElement(base_ui_1.Button, { onClick: () => { setMarkAsResolved(issue); }, label: "Mark as Resolved", color: "primary" })))));
         }),
-        !!viewResponseModal && react_1.default.createElement(ViewResponseModal_1.default, { response: isExpert ? viewResponseModal.clientResponse : viewResponseModal.expertResponse, isExpert: isExpert, open: !!viewResponseModal, onClose: () => setViewResponseModal(null) }),
+        !!viewResponseModal && react_1.default.createElement(ViewResponseModal_1.default, { selectedIssue: viewResponseModal, isExpert: isExpert, open: !!viewResponseModal, onClose: () => setViewResponseModal(null) }),
         !!markAsResolved && react_1.default.createElement(MarkResolvedModal_1.default, { escalationId: markAsResolved.escalationId, expertName: (_b = (_a = markAsResolved === null || markAsResolved === void 0 ? void 0 : markAsResolved.freelancer) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Expert', open: !!markAsResolved, onClose: () => setMarkAsResolved(false), updateProjectEscalation: updateProjectEscalation, userId: userId })));
 };
 exports.default = EscalationIssueCard;

package/lib/components/Escalations/EscalationRespondForm.js

@@ -158,7 +158,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downl
                     }
                 }
             });
-            (0, utils_1.showToast)("success", "Response submitted!");
+            (0, utils_1.showToast)("success", "Response submitted! The issue has been moved to in-progress.");
         }
         catch (error) {
             console.error("Failed to send response!", error);
@@ -170,11 +170,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downl
         }
     });
     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 !== '');
+    const processedDocs = (0, utils_1.processDocs)(docs);
     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" }),
@@ -203,7 +199,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downl
                                         : "text-gray-500 text-xs mt-1" }, type.description))))))),
                     react_1.default.createElement("div", null,
                         react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Your Response"),
-                        react_1.default.createElement(base_ui_1.Input, { type: "text", value: responseInput, placeholder: "Address the concern...", onChange: (e) => setResponseInput(e.target.value) })),
+                        react_1.default.createElement(base_ui_1.Input, { type: "text", value: responseInput, placeholder: "Address the concern...", isRequired: true, onChange: (e) => setResponseInput(e.target.value) })),
                     react_1.default.createElement("div", null,
                         react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Supporting Documents (Optional)"),
                         react_1.default.createElement("div", { className: "border border-dashed border-gray-300 rounded-md p-6 text-center" },
@@ -212,7 +208,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downl
                             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" }),
                             processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mt-4" },
                                 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], customColor: "success" }))))))),
+                                processedDocs.map((d, idx) => (react_1.default.createElement(EscalationIssueCard_1.CustomTag, { key: idx, label: d.split('%2F')[1], customColor: `bg-success border-success` }))))))),
                     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" }),
@@ -221,6 +217,6 @@ const EscalationRespondForm = ({ goBack, selectedIssue, documentUploadUrl, downl
                                 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, disabled: uploadingFile || submitting }),
-                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: submitResponse, isLoading: submitting, disabled: uploadingFile })))))));
+                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: submitResponse, isLoading: submitting, disabled: uploadingFile || responseInput === '' })))))));
 };
 exports.default = EscalationRespondForm;

package/lib/components/Escalations/EscalationSubmitForm.js

@@ -193,11 +193,11 @@ const EscalationSubmitForm = ({ goBack, goHome, expertsOrClients, projects, docu
                     input: formData
                 }
             });
-            (0, utils_1.showToast)("success", "Escalation created successfully!");
+            (0, utils_1.showToast)("success", "Issue created successfully!");
         }
         catch (error) {
-            console.error("Failed to create an escalation!", error);
-            (0, utils_1.showToast)("warning", "Failed to create escalation!");
+            console.error("Failed to create an issue!", error);
+            (0, utils_1.showToast)("warning", "Failed to create an issue!");
         }
         finally {
             setSubmitting(false);

package/lib/components/Escalations/EscalationTabsContent.js

@@ -77,7 +77,8 @@ const EscalationTabsContent = ({ activeTab, openEscalationChat, setSelectedIssue
                                     react_1.default.createElement("span", { className: "text-xs text-gray-500" },
                                         "Resolved By ",
                                         issue.statusChangedByUser.firstName + " " + issue.statusChangedByUser.lastName)))),
-                        react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat(issue), label: "Chat", color: "primary" }))));
+                        issue.status === 'Resolved' && (0, dayjs_1.default)().diff((0, dayjs_1.default)(issue.updatedAt), 'day') <= 30 &&
+                            react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat(issue.escalationNumber), label: "Chat", color: "primary" }))));
             }))
                 :
                     react_1.default.createElement("div", null, "No resolved issues.")));

package/lib/components/Escalations/Escalations.js

@@ -45,7 +45,7 @@ const Escalations = ({ expertsOrClients, projects, isExpert = false, escalations
     const [selectedProject, setSelectedProject] = (0, react_1.useState)(null);
     const [selectedIssueId, setSelectedIssueId] = (0, react_1.useState)(null); // using selectedIssueId 0 for new escalation submission
     const [showEscalationChat, setShowEscalationChat] = (0, react_1.useState)(false);
-    const [activeChatIssue, setActiveChatIssue] = (0, react_1.useState)(null);
+    const [activeChatEscalationNumber, setActiveChatEscalationNumber] = (0, react_1.useState)(null);
     const [activeEscalationTab, setActiveEscalationTab] = (0, react_1.useState)('action-required');
     const [showSuspensionModal, setShowSuspensionModal] = (0, react_1.useState)(false);
     const activeIssues = escalations.filter(issue => {
@@ -79,15 +79,16 @@ const Escalations = ({ expertsOrClients, projects, isExpert = false, escalations
         setSelectedProject(null);
         setActiveSection('support');
     };
-    const openEscalationChat = (issue) => {
-        setActiveChatIssue(issue);
+    const openEscalationChat = (escalationNumber) => {
+        setActiveChatEscalationNumber(escalationNumber);
         setShowEscalationChat(true);
     };
+    const activeChatIssue = escalations.find((issue) => issue.escalationNumber === activeChatEscalationNumber);
     return (react_1.default.createElement("div", { className: "bg-white w-full" },
         react_1.default.createElement("div", { className: isExpert ? "p-6" : "mx-auto p-6 border-solid border-t-2" },
             activeSection === 'support' && selectedIssueId === null && react_1.default.createElement("div", null,
                 react_1.default.createElement("div", { className: "flex justify-between items-center mb-1 mt-2" },
-                    react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Support & Escalation Management"),
+                    react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Support & Engagement Management"),
                     activeIssues.length > 0 ? react_1.default.createElement("div", { className: "flex items-center space-x-2" },
                         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-[#A73A43] rounded-full bg-[#F9BABF] border-[#F9BABF] font-medium` },
                             activeIssues.length,
@@ -95,7 +96,7 @@ const Escalations = ({ expertsOrClients, projects, isExpert = false, escalations
                 react_1.default.createElement("div", { className: "border-b pb-4 mb-6" },
                     react_1.default.createElement("p", { className: "text-gray-600" }, `Manage escalations with integrated chat between you, your ${isExpert ? 'client' : 'expert'}, and Paro support. All conversations are organized by priority and status.`)),
                 react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6" },
-                    react_1.default.createElement("h3", { className: "font-medium text-blue-800 mb-3" }, "How Our Escalation System Works"),
+                    react_1.default.createElement("h3", { className: "font-medium text-blue-800 mb-3" }, "How Our Engagement Support System Works"),
                     react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" },
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Standard Resolution Process"),
@@ -155,7 +156,10 @@ const Escalations = ({ expertsOrClients, projects, isExpert = false, escalations
                 react_1.default.createElement(EscalationTabsContent_1.default, { activeTab: activeEscalationTab, openEscalationChat: openEscalationChat, setSelectedIssueId: setSelectedIssueId, activeIssues: activeIssues, inProgressIssues: inProgressIssues, resolvedIssues: resolvedIssues, updateProjectEscalation: updateProjectEscalation, isExpert: isExpert, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName, userId: user.userId })),
             activeSection === 'support' && activeIssues.filter((issue) => issue.escalationNumber === selectedIssueId).length > 0 && (react_1.default.createElement(EscalationRespondForm_1.default, { goBack: goBack, selectedIssue: activeIssues.find((issue) => issue.escalationNumber === selectedIssueId), documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName, uploadExpertClientFiles: uploadExpertClientFiles, updateProjectEscalation: updateProjectEscalation, goHome: goHome, isExpert: isExpert, userId: user.userId })),
             activeSection === 'support' && selectedIssueId === 0 && (react_1.default.createElement(EscalationSubmitForm_1.default, { goBack: goBack, goHome: goHome, expertsOrClients: expertsOrClients, projects: projects, documentUploadUrl: documentUploadUrl, bucketName: bucketName, uploadExpertClientFiles: uploadExpertClientFiles, createProjectEscalation: createProjectEscalation, isExpert: isExpert, user: user, clientId: clientId })),
-            showEscalationChat && activeChatIssue && (react_1.default.createElement(EscalationChat_1.default, { activeChatIssue: activeChatIssue, showEscalationChat: showEscalationChat, setShowEscalationChat: setShowEscalationChat, user: user, createEscalationChatMessage: createEscalationChatMessage, documentUploadUrl: documentUploadUrl, bucketName: bucketName, uploadExpertClientFiles: uploadExpertClientFiles, updateProjectEscalation: updateProjectEscalation, isExpert: isExpert })),
+            showEscalationChat && activeChatIssue && (react_1.default.createElement(EscalationChat_1.default, { activeChatIssue: activeChatIssue, showEscalationChat: showEscalationChat, onClose: () => {
+                    setActiveChatEscalationNumber(null);
+                    setShowEscalationChat(false);
+                }, user: user, createEscalationChatMessage: createEscalationChatMessage, documentUploadUrl: documentUploadUrl, bucketName: bucketName, uploadExpertClientFiles: uploadExpertClientFiles, updateProjectEscalation: updateProjectEscalation, isExpert: isExpert })),
             showSuspensionModal &&
                 react_1.default.createElement(AccountSuspensionModal_1.default, { showSuspensionModal: showSuspensionModal, onClose: () => setShowSuspensionModal(false) })),
         react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {

package/lib/components/Escalations/MarkResolvedModal.js

@@ -53,11 +53,11 @@ const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProj
                     }
                 }
             });
-            (0, utils_1.showToast)("success", "Escalation marked as resolved!");
+            (0, utils_1.showToast)("success", "Issue marked as resolved!");
         }
         catch (error) {
             console.error("Failed to update escalation!", error);
-            (0, utils_1.showToast)("warning", "Failed to update escalation!");
+            (0, utils_1.showToast)("warning", "Failed to update an issue!");
         }
         finally {
             setSubmitting(false);

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

@@ -1,6 +1,6 @@
 import React from 'react';
-declare const ViewResponseModal: ({ response, open, onClose, isExpert }: {
-    response: string | null;
+declare const ViewResponseModal: ({ selectedIssue, open, onClose, isExpert }: {
+    selectedIssue: any;
     open: boolean;
     onClose: () => void;
     isExpert: boolean;

package/lib/components/Escalations/ViewResponseModal.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const base_icons_1 = require("@paro.io/base-icons");
 const core_1 = require("@material-ui/core");
-const ViewResponseModal = ({ response, open, onClose, isExpert }) => {
+const utils_1 = require("../shared/utils");
+const EscalationIssueCard_1 = require("./EscalationIssueCard");
+const ViewResponseModal = ({ selectedIssue, open, onClose, isExpert }) => {
+    const docs = [selectedIssue.expertSupportingDocuments, selectedIssue.clientSupportingDocuments, selectedIssue.internalSupportingDocuments];
+    const processedDocs = (0, utils_1.processDocs)(docs);
     return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: onClose, 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" },
@@ -20,8 +24,14 @@ const ViewResponseModal = ({ response, open, onClose, isExpert }) => {
                 react_1.default.createElement("p", { className: "text-sm font-medium" },
                     "Status: ",
                     react_1.default.createElement("span", { className: "font-normal" }, "Responded")),
+                react_1.default.createElement("p", { className: "text-sm font-medium" },
+                    "Response Type: ",
+                    react_1.default.createElement("span", { className: "font-normal" }, isExpert ? selectedIssue.clientResponseType : selectedIssue.expertResponseType)),
                 react_1.default.createElement("p", { className: "text-sm font-medium" },
                     "Response: ",
-                    react_1.default.createElement("span", { className: "font-normal" }, response))))));
+                    react_1.default.createElement("span", { className: "font-normal" }, isExpert ? selectedIssue.clientResponse : selectedIssue.expertResponse))),
+            processedDocs && processedDocs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mt-4 mb-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], customColor: `bg-success border-success` }))))))));
 };
 exports.default = ViewResponseModal;

package/lib/components/Invoices/DiscussionSection.js

@@ -45,6 +45,11 @@ const DiscussionSection = ({ disputeId, escalationNumber, currentUser, messages,
     const [visibility, setVisibility] = (0, react_1.useState)('ALL');
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const threadsEndRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (threadsEndRef.current) {
+            threadsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages]);
     // Get the sequence of unique userTypeIds to determine alignment
     const userSequence = (0, react_1.useMemo)(() => {
         const uniqueUsers = Array.from(new Set(messages.map(m => m.sender.userTypeId)));
@@ -109,7 +114,7 @@ const DiscussionSection = ({ disputeId, escalationNumber, currentUser, messages,
         return userTypeId !== currentUser.userTypeId ? 'justify-start' : 'justify-end';
     };
     const displayMessageVisibility = (visibility) => {
-        switch (visibility) {
+        switch (visibility.toUpperCase()) {
             case 'ALL':
                 return 'All';
             case 'EXPERT_INTERNAL_ONLY':
@@ -141,27 +146,28 @@ const DiscussionSection = ({ disputeId, escalationNumber, currentUser, messages,
                 react_1.default.createElement(base_icons_1.IconChat, { size: "sm", className: "text-blue-600 mr-2" }),
                 react_1.default.createElement("p", null, "This discussion applies to all projects in this dispute."))),
         react_1.default.createElement("div", { className: "rounded" },
-            messages.length ? react_1.default.createElement("div", { className: "flex-1 max-h-[40vh] overflow-y-auto border rounded-md p-2 space-y-6" }, messages.map((message) => (react_1.default.createElement("div", { key: message.id, className: `flex ${getMessageAlignment(message.sender.userTypeId)}` },
-                react_1.default.createElement("div", { className: `flex space-x-4 ${getMessageOrder(message.sender.userTypeId)} ${getMessageAlignment(message.sender.userTypeId)}` },
-                    react_1.default.createElement("div", { style: {
-                            backgroundColor: getSenderBackgroundColor(message.sender.userTypeId),
-                            color: getSenderTextColor(message.sender.userTypeId)
-                        }, className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" },
-                        react_1.default.createElement("span", { className: "text-sm font-bold" }, getSenderInitial(message.sender))),
-                    react_1.default.createElement("div", { className: "flex-1" },
-                        react_1.default.createElement("div", { className: `flex items-center ${getHeaderAlignment(message.sender.userTypeId)} space-x-2 mr-1` },
-                            react_1.default.createElement("span", { className: "text-sm font-bold text-[#333333]" },
-                                message.sender.firstName,
-                                " ",
-                                message.sender.lastName),
-                            react_1.default.createElement("span", { className: "text-xs text-[#666666]" }, (0, dayjs_1.default)(message.createdAt).format('MMM D, YYYY • h:mm A')),
-                            isInternal && (react_1.default.createElement("span", { className: "text-xs text-[#666666]" },
-                                "(",
-                                displayMessageVisibility(message.visibility),
-                                ")"))),
-                        react_1.default.createElement("div", { style: { backgroundColor: getSenderBackgroundColor(message.sender.userTypeId) }, className: "mt-1 p-3 rounded-lg" },
-                            react_1.default.createElement("p", { className: `text-sm ${getHeaderAlignment(message.sender.userTypeId)}`, style: { color: getSenderTextColor(message.sender.userTypeId) } }, message.messageText)))))))) : react_1.default.createElement(react_1.default.Fragment, null),
-            react_1.default.createElement("div", { ref: threadsEndRef }),
+            messages.length ? react_1.default.createElement("div", { className: "flex-1 max-h-[40vh] overflow-y-auto border rounded-md p-2 space-y-6" },
+                messages.map((message) => (react_1.default.createElement("div", { key: message.id, className: `flex ${getMessageAlignment(message.sender.userTypeId)}` },
+                    react_1.default.createElement("div", { className: `flex space-x-4 ${getMessageOrder(message.sender.userTypeId)} ${getMessageAlignment(message.sender.userTypeId)}` },
+                        react_1.default.createElement("div", { style: {
+                                backgroundColor: getSenderBackgroundColor(message.sender.userTypeId),
+                                color: getSenderTextColor(message.sender.userTypeId)
+                            }, className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" },
+                            react_1.default.createElement("span", { className: "text-sm font-bold" }, getSenderInitial(message.sender))),
+                        react_1.default.createElement("div", { className: "flex-1" },
+                            react_1.default.createElement("div", { className: `flex items-center ${getHeaderAlignment(message.sender.userTypeId)} space-x-2 mr-1` },
+                                react_1.default.createElement("span", { className: "text-sm font-bold text-[#333333]" },
+                                    message.sender.firstName,
+                                    " ",
+                                    message.sender.lastName),
+                                react_1.default.createElement("span", { className: "text-xs text-[#666666]" }, (0, dayjs_1.default)(message.createdAt).format('MMM D, YYYY • h:mm A')),
+                                isInternal && (react_1.default.createElement("span", { className: "text-xs text-[#666666]" },
+                                    "(",
+                                    displayMessageVisibility(message.visibility),
+                                    ")"))),
+                            react_1.default.createElement("div", { style: { backgroundColor: getSenderBackgroundColor(message.sender.userTypeId) }, className: "mt-1 p-3 rounded-lg" },
+                                react_1.default.createElement("p", { className: `text-sm ${getHeaderAlignment(message.sender.userTypeId)}`, style: { color: getSenderTextColor(message.sender.userTypeId) } }, message.messageText))))))),
+                react_1.default.createElement("div", { ref: threadsEndRef })) : react_1.default.createElement(react_1.default.Fragment, null),
             react_1.default.createElement("div", { className: "space-y-4 p-6 space-y-6 rounded mt-4", style: { backgroundColor: '#F5F7F9' } },
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("div", { className: "font-bold text-[#333333] mb-2" }, "Add Comment"),

package/lib/components/shared/utils.d.ts

@@ -42,6 +42,7 @@ export declare const titleFeatures: string[];
 export declare const serviceDescriptions: Record<string, string>;
 export declare const selectedServicesReducer: (selectedServices: any, action: any) => any;
 export declare const generateUUID: () => string;
+export declare const processDocs: (docs: (string | null | undefined)[]) => string[];
 export declare const sharedUtils: {
     selectedServicesReducer: (selectedServices: any, action: any) => any;
 };

package/lib/components/shared/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sharedUtils = exports.generateUUID = exports.selectedServicesReducer = exports.serviceDescriptions = exports.titleFeatures = exports.features = exports.titleMappings = exports.DOCUMENT_TYPE_CONSTANTS = exports.validateFileUpload = exports.showToast = exports.MAX_FILE_SIZE = exports.ACCEPTED_FILE_TYPES = exports.formatDate = exports.CustomPaper = exports.handleDownloadPdf = exports.getFileMimeType = exports.stateAbbreviationMap = exports.getPreviousMonthStartDate = exports.isOlderThan30Days = exports.formatTenure = exports.isOnClickEvent = void 0;
+exports.sharedUtils = exports.processDocs = exports.generateUUID = exports.selectedServicesReducer = exports.serviceDescriptions = exports.titleFeatures = exports.features = exports.titleMappings = exports.DOCUMENT_TYPE_CONSTANTS = exports.validateFileUpload = exports.showToast = exports.MAX_FILE_SIZE = exports.ACCEPTED_FILE_TYPES = exports.formatDate = exports.CustomPaper = exports.handleDownloadPdf = exports.getFileMimeType = exports.stateAbbreviationMap = exports.getPreviousMonthStartDate = exports.isOlderThan30Days = exports.formatTenure = exports.isOnClickEvent = void 0;
 exports.getComparator = getComparator;
 exports.stableSort = stableSort;
 exports.compareItems = compareItems;
@@ -363,4 +363,13 @@ const generateUUID = () => {
     return (0, uuid_1.v4)();
 };
 exports.generateUUID = generateUUID;
+const processDocs = (docs) => {
+    return docs
+        .filter(doc => doc !== null && doc !== undefined && doc !== '' && doc !== "NULL")
+        .flatMap(doc => doc.split(','))
+        .map(doc => doc.trim())
+        //@ts-ignore
+        .filter(doc => doc !== '' || doc !== "NULL");
+};
+exports.processDocs = processDocs;
 exports.sharedUtils = { selectedServicesReducer: exports.selectedServicesReducer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.13.01",
+  "version": "1.13.3",
   "description": "",
   "main": "lib/index.js",
   "scripts": {