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

package/lib/components/FileUploader/index.js

@@ -0,0 +1,70 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploader = void 0;
+const UploadClient_1 = __importDefault(require("../shared/UploadClient"));
+const utils_1 = require("../shared/utils");
+const CHUNK_SIZE = 5 * 1024 * 1024;
+const fileUploader = (_a) => __awaiter(void 0, [_a], void 0, function* ({ file, documentName, disputeId, projectId, documentUploadUrl, uploadExpertClientDisputeFilesData, }) {
+    var _b;
+    const fileExtension = file.name.split('.').pop() || '';
+    const fileNameWithExtension = `${documentName}.${fileExtension}`;
+    const isLargeFile = file.size >= CHUNK_SIZE;
+    try {
+        // Read file as base64
+        const fileForUpload = yield new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => { var _a; return resolve(((_a = reader.result) === null || _a === void 0 ? void 0 : _a.toString()) || ''); };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+        // Upload large file via multipart
+        if (isLargeFile) {
+            (0, utils_1.showToast)('warning', 'Uploading a large file — this may take longer than usual. Thank you for your patience!');
+            const uploadClient = new UploadClient_1.default({
+                fileSelected: file,
+                fileName: fileNameWithExtension,
+                projectId,
+                documentUploadUrl,
+            });
+            yield uploadClient.triggerMultipartUpload();
+        }
+        const inputData = {
+            disputeId: disputeId ? disputeId : projectId, // initially we don't have disputeId. clarify and update
+            fileName: documentName,
+            data: isLargeFile ? '' : fileForUpload,
+            fileSize: file.size,
+        };
+        console.log({ inputData, disputeId, projectId });
+        // Upload metadata to backend
+        const response = yield uploadExpertClientDisputeFilesData({
+            variables: {
+                input: inputData,
+            },
+        });
+        if ((_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.uploadExpertClientDisputeFilesData) {
+            (0, utils_1.showToast)('success', 'Supporting document uploaded successfully!');
+            return true;
+        }
+        else {
+            (0, utils_1.showToast)('warning', 'Failed to upload supporting document');
+            return false;
+        }
+    }
+    catch (error) {
+        (0, utils_1.showToast)('warning', 'Error uploading file. Please try again.');
+        return false;
+    }
+});
+exports.fileUploader = fileUploader;

package/lib/components/Invoices/DiscussionSection.js

@@ -44,6 +44,19 @@ const DiscussionSection = ({ disputeId, currentUser, messages, onCreateMessage,
     const [newMessage, setNewMessage] = (0, react_1.useState)('');
     const [visibility, setVisibility] = (0, react_1.useState)('ALL');
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const threadsEndRef = (0, react_1.useRef)(null);
+    const didMountRef = (0, react_1.useRef)(false);
+    // Auto scroll to bottom when messages change
+    (0, react_1.useEffect)(() => {
+        if (didMountRef.current) {
+            if (threadsEndRef.current) {
+                threadsEndRef.current.scrollIntoView({ behavior: "smooth" });
+            }
+        }
+        else {
+            didMountRef.current = true;
+        }
+    }, [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)));
@@ -138,6 +151,7 @@ const DiscussionSection = ({ disputeId, currentUser, messages, onCreateMessage,
                             react_1.default.createElement("span", { className: "text-xs text-[#666666]" }, (0, dayjs_1.default)(message.createdAt).format('MMM D, YYYY • h:mm A'))),
                         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("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/Invoices/DisputeSection.d.ts

@@ -2,6 +2,8 @@ interface DisputeSectionProps {
     dispute: any;
     onUpdateDispute: (variables: any) => Promise<any>;
     onRefetch: () => Promise<void>;
+    documentUploadUrl: string;
+    uploadExpertClientDisputeFiles: (variables: any) => Promise<any>;
 }
-export declare const DisputeSection: ({ dispute, onUpdateDispute, onRefetch, }: DisputeSectionProps) => JSX.Element;
+export declare const DisputeSection: ({ dispute, onUpdateDispute, onRefetch, documentUploadUrl, uploadExpertClientDisputeFiles, }: DisputeSectionProps) => JSX.Element;
 export {};

package/lib/components/Invoices/DisputeSection.js

@@ -22,11 +22,21 @@ 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.DisputeSection = void 0;
 const react_1 = __importStar(require("react"));
 const base_ui_1 = require("@paro.io/base-ui");
 const base_icons_1 = require("@paro.io/base-icons");
+const FileUploader_1 = require("../FileUploader");
 const ACCEPTED_FILE_TYPES = [
     'application/pdf',
     'application/msword',
@@ -35,7 +45,7 @@ const ACCEPTED_FILE_TYPES = [
     'image/png',
     'text/csv',
 ];
-const DisputeSection = ({ dispute, onUpdateDispute, onRefetch, }) => {
+const DisputeSection = ({ dispute, onUpdateDispute, onRefetch, documentUploadUrl, uploadExpertClientDisputeFiles, }) => {
     var _a, _b, _c;
     const [files, setFiles] = (0, react_1.useState)((dispute === null || dispute === void 0 ? void 0 : dispute.clientDocumentLinks) || []);
     const fileInputRef = (0, react_1.useRef)(null);
@@ -49,9 +59,31 @@ const DisputeSection = ({ dispute, onUpdateDispute, onRefetch, }) => {
         const validFiles = Array.from(selectedFiles)
             .filter(file => validateFileUpload(file))
             .map(file => file.name);
-        if (validFiles.length === 0)
-            return;
-        setFiles(prev => [...prev, ...validFiles]);
+        const getFileNames = selectedFiles && Array.from(selectedFiles).map((file) => {
+            if (!validateFileUpload(file)) {
+                return null;
+            }
+            if (file) {
+                return file.name;
+            }
+        }).filter((name) => name !== null);
+        if (getFileNames && getFileNames.length > 0) {
+            Array.from(selectedFiles).forEach((selectedFile) => {
+                const reader = new FileReader();
+                reader.onloadend = () => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b;
+                    yield (0, FileUploader_1.fileUploader)({
+                        file: selectedFile,
+                        documentName: selectedFile.name,
+                        projectId: Number((_b = (_a = dispute === null || dispute === void 0 ? void 0 : dispute.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.projectId),
+                        documentUploadUrl: documentUploadUrl,
+                        uploadExpertClientDisputeFilesData: uploadExpertClientDisputeFiles,
+                    });
+                });
+                reader.readAsDataURL(selectedFile);
+            });
+            setFiles(prev => [...prev, ...validFiles]);
+        }
         if (fileInputRef.current) {
             fileInputRef.current.value = '';
         }

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

@@ -5,6 +5,8 @@ interface InvoiceCardProps {
     chatMessages: any[];
     updateClientInvoiceMutation: any;
     refetchInvoiceDisputes: any;
+    documentUploadUrl: string;
+    uploadExpertClientDisputeFiles: any;
 }
-export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, }: InvoiceCardProps) => JSX.Element;
+export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, documentUploadUrl, uploadExpertClientDisputeFiles, }: InvoiceCardProps) => JSX.Element;
 export {};

package/lib/components/Invoices/InvoiceCard.js

@@ -11,13 +11,13 @@ const InvoiceDetails_1 = require("./InvoiceDetails");
 const DisputeSection_1 = require("./DisputeSection");
 const DiscussionSection_1 = require("./DiscussionSection");
 const DecisionSection_1 = require("./DecisionSection");
-const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, }) => {
+const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, documentUploadUrl, uploadExpertClientDisputeFiles, }) => {
     var _a, _b, _c;
     return (react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white rounded-lg shadow-sm overflow-hidden" },
         react_1.default.createElement(InvoiceHeader_1.InvoiceHeader, { invoice: clientInvoice }),
         react_1.default.createElement("div", { className: "p-6 space-y-6" },
             react_1.default.createElement(InvoiceDetails_1.InvoiceDetails, { invoice: clientInvoice }),
-            react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: clientInvoice, onUpdateDispute: updateClientInvoiceMutation, onRefetch: refetchInvoiceDisputes }),
+            react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: clientInvoice, onUpdateDispute: updateClientInvoiceMutation, onRefetch: refetchInvoiceDisputes, documentUploadUrl: documentUploadUrl, uploadExpertClientDisputeFiles: uploadExpertClientDisputeFiles }),
             (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.chatEnabled) && (react_1.default.createElement(DiscussionSection_1.DiscussionSection, { disputeId: (_b = (_a = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id, currentUser: user, messages: chatMessages, onCreateMessage: createDisputeChatMessage })),
             ((_c = user === null || user === void 0 ? void 0 : user.app_metadata) === null || _c === void 0 ? void 0 : _c.userTypeId) === 2 &&
                 react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: clientInvoice, onUpdateDispute: updateClientInvoiceMutation, onRefetch: refetchInvoiceDisputes }))));

package/lib/components/Invoices/InvoiceDetails.js

@@ -27,7 +27,7 @@ const InvoiceDetails = ({ invoice }) => {
             react_1.default.createElement(base_ui_1.Tag, { label: invoice === null || invoice === void 0 ? void 0 : invoice.status, variant: "subtle", color: getStatusColor(invoice === null || invoice === void 0 ? void 0 : invoice.status) }),
             react_1.default.createElement("span", { className: "text-xs text-[#666666]" },
                 "Last updated: ",
-                (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('YYYY-MM-DD'))),
+                (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('MM-DD-YYYY'))),
         ((_a = invoice === null || invoice === void 0 ? void 0 : invoice.disputeProjects) === null || _a === void 0 ? void 0 : _a.length) > 0 && (react_1.default.createElement("div", { className: "space-y-4" },
             react_1.default.createElement("div", { className: "grid grid-cols-1 gap-4" }, invoice.disputeProjects.map((project) => (react_1.default.createElement(DisputeProjectCard_1.DisputeProjectCard, { key: project.id, project: project, client: invoice === null || invoice === void 0 ? void 0 : invoice.client, disputeDate: invoice === null || invoice === void 0 ? void 0 : invoice.disputeDate, disputeUpdatedDate: invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate }))))))));
 };

package/lib/components/Invoices/InvoiceHeader.js

@@ -15,10 +15,10 @@ const InvoiceHeader = ({ invoice }) => {
                 react_1.default.createElement("span", { className: "ml-2" }, (_a = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _a === void 0 ? void 0 : _a.id)),
             react_1.default.createElement("div", null,
                 react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Date: "),
-                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeDate).format('MMM D, YYYY'))),
+                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeDate).format('MM-DD-YYYY'))),
             react_1.default.createElement("div", null,
                 react_1.default.createElement("span", { className: "text-sm font-bold" }, "Invoice Date: "),
-                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)((_b = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _b === void 0 ? void 0 : _b.dateGenerated).format('MMM D, YYYY')))),
+                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)((_b = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _b === void 0 ? void 0 : _b.dateGenerated).format('MM-DD-YYYY')))),
         react_1.default.createElement("div", null,
             react_1.default.createElement("span", { className: "text-sm font-bold" }, "Expert Name: "),
             react_1.default.createElement("span", { className: "ml-2" }, (_c = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _c === void 0 ? void 0 :

package/lib/components/OrganizationChart/OrganizationChart.d.ts

@@ -1,15 +1,15 @@
-interface OrgChartProps {
-    openModal: boolean;
-    setOpenModal: (openModal: boolean) => void;
-    expertFirms: any;
-    firstName: string;
-    lastName: string;
-    imageUrl?: string;
-    primaryServiceLine: string;
-    city: string;
-    stateAbbreviation: string;
-    paroTenure?: string;
-    isPublicProfile?: boolean;
-}
-export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
-export {};
+interface OrgChartProps {
+    openModal: boolean;
+    setOpenModal: (openModal: boolean) => void;
+    expertFirms: any;
+    firstName: string;
+    lastName: string;
+    imageUrl?: string;
+    primaryServiceLine: string;
+    city: string;
+    stateAbbreviation: string;
+    paroTenure?: string;
+    isPublicProfile?: boolean;
+}
+export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
+export {};