@paro.io/expert-shared-components 1.11.2 → 1.11.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Paro, Inc
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Paro, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,2 +1,2 @@
-# expert-shared-components
-Repository to store Components shared between the Expert Apps and Internal Apps
+# expert-shared-components
+Repository to store Components shared between the Expert Apps and Internal Apps

package/lib/components/ClientReferencesSection/DeleteButton.js

@@ -15,26 +15,26 @@ const omitDeleteButtonIconProps = ["isDisabled"];
 const omitDeleteButtonTypographyProps = ["isDisabled"];
 const DeleteButtonTypography = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(Typography_1.default, Object.assign({}, (0, omit_1.default)(props, omitDeleteButtonTypographyProps)));
-}) `
-  padding-right: 17px;
-  color: ${colors_1.default.deleteButtonRed} !important ;
+}) `
+  padding-right: 17px;
+  color: ${colors_1.default.deleteButtonRed} !important ;
   ${({ isDisabled }) => {
     return (isDisabled &&
-        `
-      color: ${colors_1.default.notice} !important;
+        `
+      color: ${colors_1.default.notice} !important;
   `);
-}}
+}}
 `;
 const DeleteButtonIcon = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(Clear_1.default, Object.assign({}, (0, omit_1.default)(props, omitDeleteButtonIconProps)));
-}) `
-  color: ${colors_1.default.deleteButtonRed} !important ;
+}) `
+  color: ${colors_1.default.deleteButtonRed} !important ;
   ${({ isDisabled }) => {
     return (isDisabled &&
-        `
-        color: ${colors_1.default.notice} !important;
+        `
+        color: ${colors_1.default.notice} !important;
     `);
-}}
+}}
 `;
 const DeleteButton = ({ buttonText, onClick, variant = "text", isDisabled, className }) => {
     return (react_1.default.createElement(Buttons_1.StyledEditOrDeleteButton, { onClick: () => {

package/lib/components/ClientReferencesSection/ParoError.js

@@ -9,18 +9,18 @@ const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("./constants/colors"));
 const AlertSnackBarButton_1 = require("./AlertSnackBarButton");
-const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
-  width: 100%;
-  padding-bottom: 100;
+const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
+  width: 100%;
+  padding-bottom: 100;
 `;
-const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
-  color: ${colors_1.default.paroBlack};
-  padding: 0px 0px 18px 0px;
+const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
+  color: ${colors_1.default.paroBlack};
+  padding: 0px 0px 18px 0px;
 `;
-const ParoSubtitle = styled_components_1.default.div `
-  color: ${colors_1.default.paroBlack};
-  margin-bottom: 24px;
-  font-size: 1rem;
+const ParoSubtitle = styled_components_1.default.div `
+  color: ${colors_1.default.paroBlack};
+  margin-bottom: 24px;
+  font-size: 1rem;
 `;
 const ParoError = ({ handleClose }) => {
     const handleCancelLanguage = handleClose ? "Close" : "Retry";

package/lib/components/ClientReferencesSection/TagsSection.js

@@ -9,8 +9,8 @@ const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const NullContentConditionalColor_1 = require("./styles/NullContentConditionalColor");
 const Tags_1 = require("./styles/Tags");
-const ProfileTags = (0, styled_components_1.default)(Tags_1.Tags) `
-  margin: 0 5px 8px 0;
+const ProfileTags = (0, styled_components_1.default)(Tags_1.Tags) `
+  margin: 0 5px 8px 0;
 `;
 const TagsSection = ({ multiLine, tags = [], tagsExpected, }) => {
     if ((tags === null || tags === void 0 ? void 0 : tags.length) < 1) {

package/lib/components/ClientReferencesSection/styles/BrandedTypography.js

@@ -7,6 +7,6 @@ exports.StyledTypography = void 0;
 const Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.StyledTypography = (0, styled_components_1.default)(Typography_1.default) `
-  color: ${colors_1.default.paroDeepblue} !important ;
+exports.StyledTypography = (0, styled_components_1.default)(Typography_1.default) `
+  color: ${colors_1.default.paroDeepblue} !important ;
 `;

package/lib/components/ClientReferencesSection/styles/Buttons.js

@@ -7,21 +7,21 @@ exports.StyledEditOrDeleteButton = exports.HeaderButtonUnderline = exports.Heade
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.HeaderButtons = (0, styled_components_1.default)(core_1.Button) `
-  margin-left: 0px !important;
-  padding-left: 0px !important;
-  span {
-    color: ${colors_1.default.buttonText} !important;
-  }
+exports.HeaderButtons = (0, styled_components_1.default)(core_1.Button) `
+  margin-left: 0px !important;
+  padding-left: 0px !important;
+  span {
+    color: ${colors_1.default.buttonText} !important;
+  }
 `;
-exports.HeaderButtonUnderline = (0, styled_components_1.default)(exports.HeaderButtons) `
-  text-decoration: underline;
+exports.HeaderButtonUnderline = (0, styled_components_1.default)(exports.HeaderButtons) `
+  text-decoration: underline;
 `;
-exports.StyledEditOrDeleteButton = (0, styled_components_1.default)(core_1.Button) `
-  margin: 10px 0px !important;
-  background-color: ${colors_1.default.primary};
-  color: ${colors_1.default.white};
-  :hover {
-    color: ${colors_1.default.primary} !important;
-  }
+exports.StyledEditOrDeleteButton = (0, styled_components_1.default)(core_1.Button) `
+  margin: 10px 0px !important;
+  background-color: ${colors_1.default.primary};
+  color: ${colors_1.default.white};
+  :hover {
+    color: ${colors_1.default.primary} !important;
+  }
 `;

package/lib/components/ClientReferencesSection/styles/Name.js

@@ -11,12 +11,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.Name = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(core_1.Typography, Object.assign({}, (0, omit_1.default)(props, ["isNull"])));
-}) `
-  font-family: Roboto-Bold;
+}) `
+  font-family: Roboto-Bold;
   ${({ isNull }) => {
     return (isNull &&
-        `
-        color: ${colors_1.default.paroRed} !important;
+        `
+        color: ${colors_1.default.paroRed} !important;
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/NullContentConditionalColor.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NullContentConditionalColor = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.NullContentConditionalColor = styled_components_1.default.span `
+exports.NullContentConditionalColor = styled_components_1.default.span `
   ${(props) => {
     return (props.isNull &&
-        `
-        color: ${colors_1.default.paroRed} !important
+        `
+        color: ${colors_1.default.paroRed} !important
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/SectionBody.js

@@ -10,18 +10,18 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.SectionBody = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement("div", Object.assign({}, (0, omit_1.default)(props, ["atLeastOneValueIsNull"])));
-}) `
-  background-color: ${colors_1.default.white};
-  border-radius: 2px;
-  border: 1px Solid ${colors_1.default.lightGray};
-  color: ${colors_1.default.paroBlack};
-  font-family: Roboto;
-  padding: 32.5px 42.5px 32.5px 42.5px;
-  width: 100%;
+}) `
+  background-color: ${colors_1.default.white};
+  border-radius: 2px;
+  border: 1px Solid ${colors_1.default.lightGray};
+  color: ${colors_1.default.paroBlack};
+  font-family: Roboto;
+  padding: 32.5px 42.5px 32.5px 42.5px;
+  width: 100%;
   ${({ atLeastOneValueIsNull }) => {
     return (atLeastOneValueIsNull &&
-        `
-        border-color: ${colors_1.default.paroRed} !important;
+        `
+        border-color: ${colors_1.default.paroRed} !important;
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/SectionTitle.js

@@ -10,12 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.SectionTitle = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement("div", Object.assign({}, (0, omit_1.default)(props, ["noBottomPadding"])));
-}) `
-  font-family: Roboto-Bold;
-  font-size: 20px;
-  color: ${colors_1.default.paroBlack};
-  padding: 23px 0px 15.5px 0px;
+}) `
+  font-family: Roboto-Bold;
+  font-size: 20px;
+  color: ${colors_1.default.paroBlack};
+  padding: 23px 0px 15.5px 0px;
   ${({ noBottomPadding }) => {
     return noBottomPadding && "padding-bottom: 0 !important;";
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/Tags.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tags = void 0;
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Tags = (0, styled_components_1.default)(core_1.Chip) `
-  font-family: Roboto-Bold;
+exports.Tags = (0, styled_components_1.default)(core_1.Chip) `
+  font-family: Roboto-Bold;
 `;

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

@@ -8,7 +8,6 @@ interface ChatMessages {
         firstName: string;
         lastName: string;
         userTypeId: number;
-        avatar: string | null;
     };
     messageText: string;
     visibility: "ALL" | "INTERNAL_ONLY" | "CLIENT_INTERNAL_ONLY" | "EXPERT_INTERNAL_ONLY";
@@ -20,6 +19,7 @@ interface DiscussionThreadProps {
     currentUser: any;
     initialThreads: ChatMessages[] | [];
     createDisputeChatMessage: any;
+    disputeId: number;
 }
-export declare const DiscussionThread: ({ currentUser, initialThreads, createDisputeChatMessage, }: DiscussionThreadProps) => React.JSX.Element;
+export declare const DiscussionThread: ({ currentUser, initialThreads, createDisputeChatMessage, disputeId, }: DiscussionThreadProps) => React.JSX.Element;
 export {};

package/lib/components/DiscussionThread/DiscussionThread.js

@@ -22,52 +22,75 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DiscussionThread = void 0;
 const react_1 = __importStar(require("react"));
 const base_ui_1 = require("@paro.io/base-ui");
-const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessage, }) => {
+const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessage, disputeId, }) => {
     const [messages, setMessages] = (0, react_1.useState)(initialThreads);
+    const [sending, setSending] = (0, react_1.useState)(false);
     const [comment, setComment] = (0, react_1.useState)("");
     const threadsEndRef = (0, react_1.useRef)(null);
-    const [invalid, setInvalid] = (0, react_1.useState)(false);
+    const didMountRef = (0, react_1.useRef)(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("");
+        if (didMountRef.current) {
+            if (threadsEndRef.current) {
+                threadsEndRef.current.scrollIntoView({ behavior: "smooth" });
+            }
         }
         else {
-            setInvalid(true);
+            didMountRef.current = 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("");
-    };
+    }, [messages]);
+    const handleSend = () => __awaiter(void 0, void 0, void 0, function* () {
+        setSending(true);
+        try {
+            if (comment) {
+                const chatInput = {
+                    disputeId: disputeId,
+                    messageText: comment,
+                    senderId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId,
+                    visibility: "ALL"
+                };
+                yield createDisputeChatMessage({
+                    variables: {
+                        input: chatInput
+                    }
+                }).then((res) => {
+                    const newMsg = {
+                        messageId: res.data.createDisputeChatMessage.messageId,
+                        disputeId: res.data.createDisputeChatMessage.disputeId,
+                        sender: res.data.createDisputeChatMessage.sender,
+                        messageText: res.data.createDisputeChatMessage.messageText,
+                        visibility: res.data.createDisputeChatMessage.visibility,
+                        createdAt: res.data.createDisputeChatMessage.createdAt,
+                        updatedAt: res.data.createDisputeChatMessage.updatedAt,
+                        isDeleted: res.data.createDisputeChatMessage.isDeleted,
+                    };
+                    setMessages([...messages, newMsg]);
+                    setComment("");
+                }).catch((error) => {
+                    console.error("Error creating dispute chat message:", error);
+                });
+            }
+        }
+        catch (error) {
+            console.error("Error sending message:", error);
+        }
+        finally {
+            setSending(false);
+        }
+    });
     const handleKeyPress = (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
@@ -87,17 +110,17 @@ const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessag
             .toUpperCase()
             .substring(0, 2);
     };
-    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 h-auto" },
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white 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.length ? 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 isCurrentUser = currentUser.userId === 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 bg-[#5f4508]" }, getInitials(userName || 'User'))))),
+                    !isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 mr-2" },
+                        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 bg-[#5f4508]" }, getInitials(userName || 'User')))),
                     react_1.default.createElement("div", { className: `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
@@ -105,10 +128,10 @@ const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessag
                                 : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.messageText),
                         react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(timestamp)))));
             }),
-            react_1.default.createElement("div", { ref: threadsEndRef })),
+            react_1.default.createElement("div", { ref: threadsEndRef })) : react_1.default.createElement(react_1.default.Fragment, null),
         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" })))));
+                react_1.default.createElement(base_ui_1.Button, { label: "Send", onClick: handleSend, disabled: !comment.trim(), isLoading: sending, color: "primary", className: "ml-2 px-4 py-2" })))));
 };
 exports.DiscussionThread = DiscussionThread;

package/lib/components/DocumentCenter/DocumentTable.d.ts

@@ -1,15 +1,15 @@
-interface DocumentTableProps {
-    legacyFreelancerId: number;
-    paroProjectsData: any;
-    expiryDate: string;
-    expertFiles: any[];
-    uploadExpertClientFiles: any;
-    uploadFileData: any;
-    deleteFileMutation: any;
-    updateFreelancerExpiryMutation: any;
-    GetFilesDocument: any;
-    foldername: string;
-    paroDocuments: boolean;
-}
-export declare const DocumentTable: ({ legacyFreelancerId, paroProjectsData, expiryDate, expertFiles, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, GetFilesDocument, foldername, paroDocuments }: DocumentTableProps) => JSX.Element;
-export {};
+interface DocumentTableProps {
+    legacyFreelancerId: number;
+    paroProjectsData: any;
+    expiryDate: string;
+    expertFiles: any[];
+    uploadExpertClientFiles: any;
+    uploadFileData: any;
+    deleteFileMutation: any;
+    updateFreelancerExpiryMutation: any;
+    GetFilesDocument: any;
+    foldername: string;
+    paroDocuments: boolean;
+}
+export declare const DocumentTable: ({ legacyFreelancerId, paroProjectsData, expiryDate, expertFiles, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, GetFilesDocument, foldername, paroDocuments }: DocumentTableProps) => JSX.Element;
+export {};