@paro.io/expert-shared-components 1.11.0 → 1.11.1

package/lib/components/DiscussionThread/DiscussionThread.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface ChatMessages {
+    messageId: number;
+    disputeId: number;
+    sender: {
+        id: number;
+        email: string;
+        firstName: string;
+        lastName: string;
+        userTypeId: number;
+        avatar: string | null;
+    };
+    messageText: string;
+    visibility: "ALL" | "INTERNAL_ONLY" | "CLIENT_INTERNAL_ONLY" | "EXPERT_INTERNAL_ONLY";
+    createdAt: string;
+    updatedAt: string;
+    isDeleted: boolean;
+}
+interface DiscussionThreadProps {
+    currentUser: any;
+    initialThreads: ChatMessages[] | [];
+    createDisputeChatMessage: any;
+}
+export declare const DiscussionThread: ({ currentUser, initialThreads, createDisputeChatMessage, }: DiscussionThreadProps) => React.JSX.Element;
+export {};

package/lib/components/DiscussionThread/DiscussionThread.js

@@ -0,0 +1,115 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscussionThread = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessage, }) => {
+    const [messages, setMessages] = (0, react_1.useState)(initialThreads);
+    const [comment, setComment] = (0, react_1.useState)("");
+    const threadsEndRef = (0, react_1.useRef)(null);
+    const [invalid, setInvalid] = (0, react_1.useState)(false);
+    // Auto scroll to bottom when messages change
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = threadsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    const handleSend = () => {
+        setInvalid(false);
+        if (comment) {
+            createDisputeChatMessage();
+            handleSendMessage();
+            setComment("");
+        }
+        else {
+            setInvalid(true);
+        }
+    };
+    const handleSendMessage = () => {
+        const newMsg = {
+            messageId: 0, // update required
+            disputeId: messages[0].disputeId,
+            sender: {
+                id: currentUser.id,
+                email: currentUser.email,
+                firstName: currentUser.name.split(' ')[0] || '',
+                lastName: currentUser.name.split(' ')[1] || '',
+                userTypeId: currentUser.userTypeId,
+                avatar: currentUser.avatar,
+            },
+            messageText: comment,
+            visibility: "ALL",
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            isDeleted: false,
+        };
+        setMessages([...messages, newMsg]);
+        setComment("");
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    const formatTime = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) +
+            ' · ' + date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+    };
+    const getInitials = (name) => {
+        return name
+            .split(' ')
+            .map(word => word[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 h-auto" },
+        react_1.default.createElement("div", { className: `py-3 flex items-center` },
+            react_1.default.createElement("div", { className: "font-semibold text-gray-800 capitalize" }, "Discussion Thread")),
+        react_1.default.createElement("div", { className: "flex-1 max-h-[30vh] overflow-y-auto border rounded-md p-2" },
+            messages.map((message) => {
+                var _a;
+                const isCurrentUser = currentUser.id === message.sender.id;
+                const userName = message.sender.firstName + message.sender.lastName;
+                const timestamp = message.updatedAt ? message.updatedAt : message.createdAt;
+                return (react_1.default.createElement("div", { key: message.messageId, className: `flex mb-4 ${isCurrentUser ? 'justify-end' : 'justify-start'}` },
+                    !isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 mr-2" }, ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.avatar) ? (react_1.default.createElement("img", { src: message.sender.avatar, alt: userName, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: `h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-medium ${isCurrentUser ? 'bg-[#255b5c]' : 'bg-[#5f4508]'}` }, getInitials(userName || 'User'))))),
+                    react_1.default.createElement("div", { className: `${isCurrentUser ? 'order-1' : 'order-2'} ml-1 min-w-min max-w-[75%] break-words` },
+                        !isCurrentUser && (react_1.default.createElement("div", { className: "text-xs text-gray-500 font-medium mb-1" }, userName || 'Unknown User')),
+                        react_1.default.createElement("div", { className: `px-4 py-2 rounded-lg ${isCurrentUser
+                                ? 'bg-[#dbefef] rounded-br-none'
+                                : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.messageText),
+                        react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(timestamp))),
+                    isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 ml-2" }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.avatar) ? (react_1.default.createElement("img", { src: currentUser.avatar, alt: currentUser.name, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-blue-400 flex items-center justify-center text-white text-xs font-medium" }, getInitials((currentUser === null || currentUser === void 0 ? void 0 : currentUser.name) || 'You')))))));
+            }),
+            react_1.default.createElement("div", { ref: threadsEndRef })),
+        react_1.default.createElement("div", { className: "py-3" },
+            react_1.default.createElement("div", { className: "flex items-center" },
+                react_1.default.createElement("textarea", { value: comment, onChange: (e) => setComment(e.target.value), onKeyDown: handleKeyPress, placeholder: "Type your message here...", className: "flex-1 border rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500", rows: 1 }),
+                react_1.default.createElement(base_ui_1.Button, { label: "Send", onClick: handleSend, disabled: !comment.trim(), color: "primary", className: "ml-2 px-4 py-2" })))));
+};
+exports.DiscussionThread = DiscussionThread;

package/lib/components/DiscussionThread/chat.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface ChatProps {
+    currentUser: {
+        id: number;
+        name: string;
+        avatar: null;
+    };
+    initialThreads: {
+        id: number;
+        content: string;
+        sender: {
+            id: string;
+            name: string;
+            avatar: string | null;
+        };
+        timestamp: string;
+        isCurrentUser: boolean;
+    }[] | [];
+    updateChatMutation: () => void;
+}
+export declare const Chat: ({ currentUser, initialThreads, updateChatMutation, }: ChatProps) => React.JSX.Element;
+export {};

package/lib/components/DiscussionThread/chat.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+const base_ui_1 = require("@paro.io/base-ui");
+const react_1 = __importStar(require("react"));
+const Chat = ({ currentUser, initialThreads, updateChatMutation, }) => {
+    const [messages, setMessages] = (0, react_1.useState)(initialThreads);
+    const [comment, setComment] = (0, react_1.useState)("");
+    const threadsEndRef = (0, react_1.useRef)(null);
+    const [invalid, setInvalid] = (0, react_1.useState)(false);
+    // Auto scroll to bottom when messages change
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = threadsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    const handleSend = () => {
+        setInvalid(false);
+        if (comment) {
+            updateChatMutation();
+            handleSendMessage();
+            setComment("");
+        }
+        else {
+            setInvalid(true);
+        }
+    };
+    // Handle sending a new message
+    const handleSendMessage = () => {
+        const newMsg = {
+            id: Date.now(),
+            content: comment,
+            sender: Object.assign(Object.assign({}, currentUser), { id: currentUser.id.toString() }),
+            timestamp: new Date().toISOString(),
+            isCurrentUser: true
+        };
+        setMessages([...messages, newMsg]);
+        setComment("");
+    };
+    // Handle key press (send on Enter)
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    // Format timestamp
+    const formatTime = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) +
+            ' · ' + date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+    };
+    // Get initials for avatar
+    const getInitials = (name) => {
+        return name
+            .split(' ')
+            .map(word => word[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 h-auto" },
+        react_1.default.createElement("div", { className: `py-3 flex items-center` },
+            react_1.default.createElement("div", { className: "font-semibold text-gray-800 capitalize" }, "Discussion Thread")),
+        react_1.default.createElement("div", { className: "flex-1 max-h-[30vh] overflow-y-auto border rounded-md p-2" },
+            messages.map((message) => {
+                var _a, _b, _c;
+                return (react_1.default.createElement("div", { key: message.id, className: `flex mb-4 ${message.isCurrentUser ? 'justify-end' : 'justify-start'}` },
+                    !message.isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 mr-2" }, ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.avatar) ? (react_1.default.createElement("img", { src: message.sender.avatar, alt: message.sender.name, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: `h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-medium ${message.isCurrentUser ? 'bg-[#255b5c]' : 'bg-[#5f4508]'}` }, getInitials(((_b = message.sender) === null || _b === void 0 ? void 0 : _b.name) || 'User'))))),
+                    react_1.default.createElement("div", { className: `${message.isCurrentUser ? 'order-1' : 'order-2'} ml-1 min-w-min max-w-[75%]` },
+                        !message.isCurrentUser && (react_1.default.createElement("div", { className: "text-xs text-gray-500 font-medium mb-1" }, ((_c = message.sender) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown User')),
+                        react_1.default.createElement("div", { className: `px-4 py-2 rounded-lg ${message.isCurrentUser
+                                ? 'bg-[#dbefef] rounded-br-none'
+                                : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.content),
+                        react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(message.timestamp))),
+                    message.isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 ml-2" }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.avatar) ? (react_1.default.createElement("img", { src: currentUser.avatar, alt: currentUser.name, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-blue-400 flex items-center justify-center text-white text-xs font-medium" }, getInitials((currentUser === null || currentUser === void 0 ? void 0 : currentUser.name) || 'You')))))));
+            }),
+            react_1.default.createElement("div", { ref: threadsEndRef })),
+        react_1.default.createElement("div", { className: "py-3" },
+            react_1.default.createElement("div", { className: "flex items-center" },
+                react_1.default.createElement("textarea", { value: comment, onChange: (e) => setComment(e.target.value), onKeyDown: handleKeyPress, placeholder: "Type your message here...", className: "flex-1 border rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500", rows: 1 }),
+                react_1.default.createElement(base_ui_1.Button, { label: "Send", onClick: handleSend, disabled: !comment.trim(), color: "primary", className: "ml-2 px-4 py-2" })))));
+};
+exports.Chat = Chat;

package/lib/components/DiscussionThread/index.d.ts

@@ -0,0 +1 @@
+export { DiscussionThread } from './DiscussionThread';

package/lib/components/DiscussionThread/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscussionThread = void 0;
+var DiscussionThread_1 = require("./DiscussionThread");
+Object.defineProperty(exports, "DiscussionThread", { enumerable: true, get: function () { return DiscussionThread_1.DiscussionThread; } });

package/lib/components/Invoices/InvoiceCard.d.ts

@@ -1,3 +1,5 @@
-export declare const InvoiceCard: ({ invoice }: {
-    invoice: any;
+export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user }: {
+    clientInvoice: any;
+    createDisputeChatMessage: any;
+    user: any;
 }) => JSX.Element;

package/lib/components/Invoices/InvoiceCard.js

@@ -29,6 +29,7 @@ const base_ui_1 = require("@paro.io/base-ui");
 const base_ui_2 = require("@paro.io/base-ui");
 const core_1 = require("@material-ui/core");
 const base_icons_1 = require("@paro.io/base-icons");
+const DiscussionThread_1 = require("../DiscussionThread");
 const useStyles = (0, core_1.makeStyles)((theme) => ({
     root: {
         width: "100%",
@@ -92,18 +93,18 @@ const validateFileUpload = (file) => {
     }
     return true;
 };
-const InvoiceCard = ({ invoice }) => {
+const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user }) => {
     const [expandRow, setExpandRow] = (0, react_1.useState)(null);
     const classes = useStyles();
-    const [projects, setProjects] = (0, react_1.useState)(invoice.projectDetails);
+    const [projects, setProjects] = (0, react_1.useState)(clientInvoice.disputeProjects);
     const [editingRowId, setEditingRowId] = (0, react_1.useState)(null);
     const [editedExplanation, setEditedExplanation] = (0, react_1.useState)('');
     const [discussion, setDiscussion] = (0, react_1.useState)('');
     const fileInputRef = (0, react_1.useRef)(null);
     const handleChange = (e, field) => {
-        const updatedProject = field === "files" ? projects.map((project) => {
+        const updatedProject = field === "clientDocumentLinks" ? projects.map((project) => {
             if (project.projectId === expandRow) {
-                return Object.assign(Object.assign({}, project), { files: [...project.files, ...e.filter((name) => !project.files.includes(name))] });
+                return Object.assign(Object.assign({}, project), { clientDocumentLinks: [...project.clientDocumentLinks, ...e.filter((name) => !project.clientDocumentLinks.includes(name))] });
             }
             return project;
         }) : projects.map((project) => {
@@ -121,25 +122,36 @@ const InvoiceCard = ({ invoice }) => {
             .map(file => file.name);
         if (validFiles.length === 0)
             return;
-        handleChange(validFiles, "files");
+        handleChange(validFiles, "clientDocumentLinks");
         if (fileInputRef.current) {
             fileInputRef.current.value = '';
         }
     };
     return (react_1.default.createElement(base_ui_1.Card, { className: `mx-2 my-4 md:mx-8 flex md:flex items-center justify-between rounded flex-col` },
-        react_1.default.createElement("div", { key: invoice.invoiceId, className: "bg-[#0F172A] text-white mb-1 p-4 relative top-0 left-0 w-full rounded flex flex-row justify-evenly" },
+        react_1.default.createElement("div", { key: clientInvoice.invoice.id, className: "bg-[#0F172A] text-white mb-1 p-4 relative top-0 left-0 w-full rounded flex flex-row justify-evenly" },
             react_1.default.createElement("b", null,
                 "Dispute Invoice #",
-                invoice.invoiceId),
+                clientInvoice.invoice.id),
             react_1.default.createElement("p", null,
                 "Disputed: ",
-                invoice.disputedDate),
+                clientInvoice.disputeDate),
             react_1.default.createElement("p", null,
                 "Invoice Date: ",
-                invoice.invoiceDate),
-            react_1.default.createElement("p", null,
-                "Expert: ",
-                invoice.expertName)),
+                clientInvoice.invoice.dateGenerated)),
+        react_1.default.createElement("div", { className: "flex flex-row justify-start items-center gap-2" },
+            clientInvoice && // for in progress
+                react_1.default.createElement(base_ui_1.Tag, { color: "warning", label: "In Progress", variant: "subtle" }),
+            clientInvoice && // for resolved
+                react_1.default.createElement(base_ui_1.Tag, { color: "success", label: "Resolved", variant: "subtle" }),
+            clientInvoice && // for submitted
+                react_1.default.createElement(base_ui_1.Tag, { color: "danger", label: "Submitted", variant: "subtle" }),
+            clientInvoice && // for acion taken
+                react_1.default.createElement(base_ui_1.Tag, { color: "success", label: "Invoice reduced", variant: "subtle" }),
+            clientInvoice && // for editable upto 
+                react_1.default.createElement(base_ui_1.Tag, { color: "warning", label: "Editable until May 30", variant: "subtle" }),
+            clientInvoice && // for under review 
+                react_1.default.createElement(base_ui_1.Tag, { color: "info", label: "Under Review", variant: "subtle" }),
+            react_1.default.createElement("div", { className: "flex ml-2 items-center" }, "Last updated: date")),
         react_1.default.createElement("div", { className: "w-[95%] m-2" },
             react_1.default.createElement(core_1.Table, { className: classes.table, "aria-labelledby": "tableTitle", size: 'medium', "aria-label": "enhanced table" },
                 react_1.default.createElement(core_1.TableHead, { className: classes.tableHead },
@@ -150,11 +162,11 @@ const InvoiceCard = ({ invoice }) => {
                         react_1.default.createElement(core_1.TableCell, { className: classes.tableCell }))),
                 projects.map((row) => (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(core_1.TableRow, { key: row.projectId },
-                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.project),
-                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.projectType),
+                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.project.name),
+                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeType),
                         react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.hours),
-                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.amount),
-                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.reason),
+                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeAmount),
+                        react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeReasonCode),
                         react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell },
                             react_1.default.createElement(core_1.IconButton, { onClick: () => { setExpandRow(expandRow === row.projectId ? null : row.projectId); } }, expandRow === row.projectId ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null)))),
                     expandRow &&
@@ -169,18 +181,18 @@ const InvoiceCard = ({ invoice }) => {
                                                     react_1.default.createElement(base_ui_2.Input, { label: "", type: "text", className: "w-96 mx-4 overflow-ellipsis", value: editedExplanation, onChange: (e) => setEditedExplanation(e.target.value), placeholder: "Please provide an explanation", isInvalid: !editedExplanation, isInvalidText: "Please provide an explanation" }),
                                                     react_1.default.createElement(base_ui_2.Button, { label: "Save", size: "md", color: "success", className: "ml-2 mt-1", onClick: () => {
                                                             setProjects((prev) => prev.map((p) => p.projectId === row.projectId
-                                                                ? Object.assign(Object.assign({}, p), { explanation: editedExplanation }) : p));
+                                                                ? Object.assign(Object.assign({}, p), { clientExplanation: editedExplanation }) : p));
                                                             setEditingRowId(null);
                                                         } }))) : (react_1.default.createElement(base_ui_2.Button, { label: "Edit", iconLeft: react_1.default.createElement(base_icons_1.IconPencil, { size: 'sm' }), onClick: () => {
-                                                        setEditedExplanation(row.explanation);
+                                                        setEditedExplanation(row.clientExplanation);
                                                         setEditingRowId(row.projectId);
                                                     }, size: "sm", color: "info", className: "ml-6" }))),
-                                            react_1.default.createElement("p", null, row.explanation),
+                                            react_1.default.createElement("p", null, row.clientExplanation),
                                             react_1.default.createElement("b", { className: "flex flex-row flex-wrap justify-start items-center mt-2" },
                                                 "Supporting Documents:",
                                                 react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx", style: { display: 'none' }, ref: fileInputRef, onChange: handleUpload }),
                                                 react_1.default.createElement(base_ui_2.Button, { label: "Add File", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: 'sm' }), onClick: () => { fileInputRef.current && fileInputRef.current.click(); }, size: 'sm', color: "info", className: "mx-2" }),
-                                                row.files.map((f) => {
+                                                row.clientDocumentLinks.map((f) => {
                                                     return react_1.default.createElement("div", { className: "mx-2" },
                                                         react_1.default.createElement(base_ui_1.Tag, { variant: "subtle", color: "success", label: f, iconRight: react_1.default.createElement(base_icons_1.IconXCircle, null), onClick: () => {
                                                                 const updatedFiles = projects.map((p) => {
@@ -209,6 +221,7 @@ const InvoiceCard = ({ invoice }) => {
                                                         react_1.default.createElement("p", null, obj.you));
                                         })),
                                         react_1.default.createElement("div", { className: "flex flex-row w-[95%] m-2 ml-4 justify-start" },
+                                            react_1.default.createElement(DiscussionThread_1.DiscussionThread, { currentUser: user, initialThreads: clientInvoice.chatMessages, createDisputeChatMessage: createDisputeChatMessage }),
                                             react_1.default.createElement(base_ui_2.Input, { label: "", type: "text", className: "w-[60vw] mx-4 overflow-ellipsis", value: discussion, onChange: (e) => setDiscussion(e.target.value), placeholder: "Type your reply here..." }),
                                             react_1.default.createElement(base_ui_2.Button, { label: "Save", size: "md", color: "success", className: "ml-2 mt-1 w-full", disabled: !discussion, onClick: () => {
                                                     setProjects((prev) => prev.map((p) => p.projectId === row.projectId

package/lib/components/ProjectCard/ActiveProjectCard.js

@@ -132,6 +132,8 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
     }
     const showRating = ratingValue && (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)((_g = (_f = project === null || project === void 0 ? void 0 : project.rating) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.createdAt.replace('Z', '')).format('YYYY-MM-DD HH:mm:ss'), 'hours') > 48;
     const displayName = clientPortal ? expertName : (_h = project === null || project === void 0 ? void 0 : project.client) === null || _h === void 0 ? void 0 : _h.name;
+    const editResponseTime = new Date().getDate() <= 7;
+    const disputedProject = true; //update required
     return (react_1.default.createElement("div", { className: "w-full mb-8" },
         internalPortal && changeRequests && changeRequests.length > 0 && (react_1.default.createElement("div", null, changeRequests
             .filter((cr) => cr.entityId === project.id)
@@ -161,6 +163,8 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
                     react_1.default.createElement("h1", null, displayName),
                     react_1.default.createElement("p", { className: "font-bold text-md mt-1" }, `${(_j = project === null || project === void 0 ? void 0 : project.name) !== null && _j !== void 0 ? _j : "Project"} ${(singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) ? "WITH" : "WITHOUT"} a min floor.`)),
                 react_1.default.createElement("div", { className: "flex flex-row gap-x-2 items-center ml-auto" },
+                    disputedProject && react_1.default.createElement("div", { className: "pl-4 my-auto" },
+                        react_1.default.createElement(base_ui_1.Tag, { variant: "subtle", color: "danger", label: "IN PROCESS" })),
                     showRating && react_1.default.createElement("div", { className: "flex flex-auto items-center justify-between" },
                         react_1.default.createElement(lab_1.Rating, { name: "read-only", value: Number(ratingValue), precision: 0.5, size: "large", readOnly: true, emptyIcon: react_1.default.createElement(Star_1.default, { fontSize: "inherit" }) })),
                     (singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) && !adhocProject ? react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "Minimum Floor Hours is the minimum amount of hours needed to log for this project.", placement: "top", arrow: true },
@@ -175,10 +179,26 @@ const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, fr
                             react_1.default.createElement("p", { className: "font-bold text-md self-center" }, "NEW !")) : "",
                     react_1.default.createElement("div", { className: "h-10 w-14 bg-[#F1F5F9] rounded-md flex place-content-center" },
                         react_1.default.createElement(base_ui_1.Button, { onClick: () => { setExpand(!expand); }, className: "font-bold text-md p-8", icon: expand ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null) })))),
+            disputedProject && react_1.default.createElement("div", { className: "flex flex-col p-4" },
+                react_1.default.createElement("b", { className: "text-red-500" }, "Invoice #12345 Disputed"),
+                " ",
+                react_1.default.createElement("div", { className: "flex flex-row justify-between items-center align-center bg-[#FDD7A5] p-2 rounded-md" },
+                    selectedTab !== 6 && react_1.default.createElement("div", { className: `w-1/6 h-12 w-16 rounded-md flex place-content-center items-center bg-[#A73A43] text-[#F1F5F9]` },
+                        react_1.default.createElement("h1", { className: "text-xl" }, "!")),
+                    selectedTab === 6 && editResponseTime ?
+                        react_1.default.createElement("p", { className: "w-full pl-2" }, "Your response has been received and is being reviewed by our team. The project remains paused during this review and you will not be able to submit time for this project.")
+                        :
+                            react_1.default.createElement("p", { className: "w-full pl-2" },
+                                "Client has disputed $3,500.00. This project is paused until resolved and you will not be able to log hours.",
+                                react_1.default.createElement("br", null),
+                                "Reason: Incorrect Hours Logged"),
+                    react_1.default.createElement("div", { className: "w-1/6 pl-2" },
+                        react_1.default.createElement(base_ui_1.Button, { label: selectedTab === 6 && editResponseTime ? "EDIT RESPONSE" : "RESPOND TO DISPUTE", size: "sm", color: "primary", disabled: false, className: "w-full", onClick: () => { } }),
+                        " "))),
             expand && react_1.default.createElement("div", { className: `flex w-full p-4 gap-x-10 gap-y-10 ${projectRateType === "Fixed" ? "flex-col" : "flex-col md:flex-row"}` },
                 react_1.default.createElement(LeftCardUI_1.LeftCardUI, { projectData: singleProjectData, projectFrequencyType: projectFrequencyType, projectRateType: projectRateType, project: project, isAuthenticated: isAuthenticated, adhocProject: adhocProject, activeProject: activeProject, freelancerId: freelancerId, selectedTab: selectedTab, updateProjectTaskMutation: updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask: updateProjectTask, clientPortal: clientPortal }),
                 react_1.default.createElement("div", { className: "flex flex-col flex-grow md:flex-row gap-x-0 justify-around" },
                     react_1.default.createElement(CenterCardUI_1.CenterCardUI, { startDate: project === null || project === void 0 ? void 0 : project.startDate, endDate: project === null || project === void 0 ? void 0 : project.endDate, projectData: singleProjectData, projectRateType: projectRateType, project: project, projectFrequencyType: projectFrequencyType, adhocProject: adhocProject, clientPortal: clientPortal, internalPortal: internalPortal }),
-                    react_1.default.createElement(RightCardUI_1.RightCardUI, { project: project, expertName: expertName, freelancerEmail: freelancerEmail, freelancerId: freelancerId, isAuthenticated: isAuthenticated, editEndDate: editEndDate, setEditEndDate: setEditEndDate, editStartDate: editStartDate, setEditStartDate: setEditStartDate, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, setSingleProjectData: setSingleProjectData, projectData: singleProjectData, checkStartDate: checkStartDate, activeProject: activeProject, projectRateType: projectRateType, projectFrequencyType: projectFrequencyType, upcomingProject: upcomingProject, selectedTab: selectedTab, showRating: !!showRating, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, getSowLazyQuery: getSowLazyQuery, sendParoSupportEmail: sendParoSupportEmail, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, createOrUpdateRating: createOrUpdateRating, getParoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, user: user, internalPortal: internalPortal, csmUserGroup: csmUserGroup, clientPortal: clientPortal, signedSow: signedSow, isStageProd: isStageProd, isRequestReviewEnabled: isRequestReviewEnabled, updateDBProjectRequestStatus: updateDBProjectRequestStatus }))))));
+                    react_1.default.createElement(RightCardUI_1.RightCardUI, { project: project, expertName: expertName, freelancerEmail: freelancerEmail, freelancerId: freelancerId, isAuthenticated: isAuthenticated, editEndDate: editEndDate, setEditEndDate: setEditEndDate, editStartDate: editStartDate, setEditStartDate: setEditStartDate, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, setSingleProjectData: setSingleProjectData, projectData: singleProjectData, checkStartDate: checkStartDate, activeProject: activeProject, projectRateType: projectRateType, projectFrequencyType: projectFrequencyType, upcomingProject: upcomingProject, selectedTab: selectedTab, showRating: !!showRating, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, getSowLazyQuery: getSowLazyQuery, sendParoSupportEmail: sendParoSupportEmail, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, createOrUpdateRating: createOrUpdateRating, getParoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, user: user, internalPortal: internalPortal, csmUserGroup: csmUserGroup, clientPortal: clientPortal, signedSow: signedSow, isStageProd: isStageProd, isRequestReviewEnabled: isRequestReviewEnabled, updateDBProjectRequestStatus: updateDBProjectRequestStatus, disputedProject: disputedProject }))))));
 };
 exports.ActiveProjectCard = ActiveProjectCard;

package/lib/components/ProjectCard/RightCardUI.d.ts

@@ -46,6 +46,7 @@ interface RightCardUIProps {
     isStageProd: string;
     isRequestReviewEnabled: boolean;
     updateDBProjectRequestStatus: any;
+    disputedProject: boolean;
 }
-export declare const RightCardUI: ({ project, expertName, freelancerId, freelancerEmail, isAuthenticated, editEndDate, setEditEndDate, editStartDate, setEditStartDate, showTimeModal, setShowTimeModal, setSingleProjectData, projectData, checkStartDate, activeProject, projectFrequencyType, projectRateType, upcomingProject, selectedTab, showRating, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, updateDBProjectRequestStatus, }: RightCardUIProps) => React.JSX.Element;
+export declare const RightCardUI: ({ project, expertName, freelancerId, freelancerEmail, isAuthenticated, editEndDate, setEditEndDate, editStartDate, setEditStartDate, showTimeModal, setShowTimeModal, setSingleProjectData, projectData, checkStartDate, activeProject, projectFrequencyType, projectRateType, upcomingProject, selectedTab, showRating, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, updateDBProjectRequestStatus, disputedProject, }: RightCardUIProps) => React.JSX.Element;
 export {};

package/lib/components/ProjectCard/RightCardUI.js

@@ -61,7 +61,7 @@ const TicketModal = ({ ticketModal, setTicketModal }) => {
         react_1.default.createElement("p", { className: "font-bold text-md mb-2" }, "Thank you for reaching out to Paro Support, we will contact you within the next business day to follow up on your request."),
         react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { setTicketModal(false); }, label: "OK", className: "mt-4", color: "primary" })));
 };
-const RightCardUI = ({ project, expertName, freelancerId, freelancerEmail, isAuthenticated, editEndDate, setEditEndDate, editStartDate, setEditStartDate, showTimeModal, setShowTimeModal, setSingleProjectData, projectData, checkStartDate, activeProject, projectFrequencyType, projectRateType, upcomingProject, selectedTab, showRating, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, updateDBProjectRequestStatus, }) => {
+const RightCardUI = ({ project, expertName, freelancerId, freelancerEmail, isAuthenticated, editEndDate, setEditEndDate, editStartDate, setEditStartDate, showTimeModal, setShowTimeModal, setSingleProjectData, projectData, checkStartDate, activeProject, projectFrequencyType, projectRateType, upcomingProject, selectedTab, showRating, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, updateDBProjectRequestStatus, disputedProject = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const [expandClient, setExpandClient] = (0, react_1.useState)(false);
     const [expandSupport, setExpandSupport] = (0, react_1.useState)(clientPortal);
@@ -186,7 +186,7 @@ const RightCardUI = ({ project, expertName, freelancerId, freelancerEmail, isAut
                     :
                         react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: (projectType === "One-time-Fixed" || projectType === "Recurring-Fixed") ? "Please reach out to your Customer Success Manager if you would like to submit time for Fixed Projects." : "", placement: "top", arrow: true },
                             react_1.default.createElement("div", null,
-                                react_1.default.createElement(base_ui_1.Button, { label: "LOG YOUR TIME", disabled: !activeProject, size: "sm", color: "primary", className: "w-full", onClick: () => { setShowTimeModal(true); } }))),
+                                react_1.default.createElement(base_ui_1.Button, { label: "LOG YOUR TIME", disabled: !activeProject || disputedProject, size: "sm", color: "primary", className: "w-full", onClick: () => { setShowTimeModal(true); } }))),
                 upcomingProject ? react_1.default.createElement(base_ui_1.Button, { label: "EDIT START DATE", disabled: false, size: "sm", className: "w-full", onClick: () => { setEditStartDate(true); } }) :
                     react_1.default.createElement(base_ui_1.Button, { label: "EDIT START DATE", disabled: !activeProject, size: "sm", className: "w-full", onClick: () => { setEditStartDate(true); } }),
                 checkStartDate ?

package/lib/index.d.ts

@@ -11,3 +11,4 @@ export { ServiceLinesTemplate } from './components/ServiceLinesTemplate';
 export { sharedUtils } from './components/shared/utils';
 export { ActiveProjectCard } from './components/ProjectCard/ActiveProjectCard';
 export { InvoiceCard } from './components/Invoices/InvoiceCard';
+export { DiscussionThread } from './components/DiscussionThread';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
+exports.DiscussionThread = exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
 var ReviewsTab_1 = require("./components/ReviewsTab");
 Object.defineProperty(exports, "ReviewsTab", { enumerable: true, get: function () { return ReviewsTab_1.ReviewsTab; } });
 var Reviews_1 = require("./components/Reviews");
@@ -27,3 +27,5 @@ var ActiveProjectCard_1 = require("./components/ProjectCard/ActiveProjectCard");
 Object.defineProperty(exports, "ActiveProjectCard", { enumerable: true, get: function () { return ActiveProjectCard_1.ActiveProjectCard; } });
 var InvoiceCard_1 = require("./components/Invoices/InvoiceCard");
 Object.defineProperty(exports, "InvoiceCard", { enumerable: true, get: function () { return InvoiceCard_1.InvoiceCard; } });
+var DiscussionThread_1 = require("./components/DiscussionThread");
+Object.defineProperty(exports, "DiscussionThread", { enumerable: true, get: function () { return DiscussionThread_1.DiscussionThread; } });

package/package.json

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