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

package/lib/components/Invoices/InvoiceCard.js

@@ -1,211 +1,25 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InvoiceCard = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 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%",
-    },
-    paper: {
-        width: "100%",
-    },
-    table: {
-        minWidth: '95%',
-        border: "1px solid",
-        borderColor: "#E2E8F0",
-    },
-    visuallyHidden: {
-        border: 0,
-        clip: "rect(0 0 0 0)",
-        height: 1,
-        margin: -1,
-        overflow: "hidden",
-        padding: 0,
-        position: "absolute",
-        top: 20,
-        width: 1,
-    },
-    tableCell: {
-        width: "auto",
-    },
-    collapse: {
-        backgroundColor: "#FFFFFF",
-        width: "100%",
-        borderRadius: 6,
-        marginLeft: 12,
-        marginTop: 12,
-    },
-    tableHead: {
-        backgroundColor: "#F1F5F9",
-        borderRadius: 6,
-        width: "100%",
-    },
-}));
-const headCells = [
-    { id: 'project', label: 'Project' },
-    { id: 'projectType', label: 'Project Type' },
-    { id: 'hours', label: 'Hours' },
-    { id: 'amount', label: 'Amount' },
-    { id: 'reason', label: 'Reason' },
-];
-const ACCEPTED_FILE_TYPES = [
-    'application/pdf',
-    'application/msword',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-];
-const validateFileUpload = (file) => {
-    if (!file) {
-        return false;
-    }
-    if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
-        return false;
-    }
-    if (file.size > 5242880) { //5MB size
-        return false;
-    }
-    return true;
-};
-const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user }) => {
-    const [expandRow, setExpandRow] = (0, react_1.useState)(null);
-    const classes = useStyles();
-    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 === "clientDocumentLinks" ? projects.map((project) => {
-            if (project.projectId === expandRow) {
-                return Object.assign(Object.assign({}, project), { clientDocumentLinks: [...project.clientDocumentLinks, ...e.filter((name) => !project.clientDocumentLinks.includes(name))] });
-            }
-            return project;
-        }) : projects.map((project) => {
-            return Object.assign(Object.assign({}, project), { [field]: e.target.value });
-        });
-        //upload files mutation
-        setProjects(updatedProject);
-    };
-    const handleUpload = (event) => {
-        const selectedFiles = event.target.files;
-        if (!selectedFiles)
-            return;
-        const validFiles = Array.from(selectedFiles)
-            .filter(file => validateFileUpload(file))
-            .map(file => file.name);
-        if (validFiles.length === 0)
-            return;
-        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: 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 #",
-                clientInvoice.invoice.id),
-            react_1.default.createElement("p", null,
-                "Disputed: ",
-                clientInvoice.disputeDate),
-            react_1.default.createElement("p", null,
-                "Invoice Date: ",
-                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 },
-                    react_1.default.createElement(core_1.TableRow, null,
-                        headCells.map((headcell) => {
-                            return react_1.default.createElement(core_1.TableCell, { key: headcell.id, className: classes.tableCell }, headcell.label);
-                        }),
-                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell }))), projects === null || projects === void 0 ? void 0 :
-                projects.map((row) => {
-                    var _a, _b;
-                    return (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 }, (_a = row.project) === null || _a === void 0 ? void 0 : _a.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.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 &&
-                            react_1.default.createElement(core_1.TableRow, null,
-                                react_1.default.createElement(core_1.TableCell, { colSpan: headCells.length + 1, style: { paddingBottom: 0, paddingTop: 0 } },
-                                    react_1.default.createElement(core_1.Collapse, { in: expandRow === row.projectId, timeout: "auto", unmountOnExit: true },
-                                        react_1.default.createElement(react_1.default.Fragment, null,
-                                            react_1.default.createElement(base_ui_1.Card, { className: `bg-[#F8F9FA] m-2 md:mx-8 flex md:flex items-start justify-between rounded flex-col w-[95%] p-6` },
-                                                react_1.default.createElement("b", { className: "mb-2 flex flex-row justify-start items-center" },
-                                                    "Explanation:",
-                                                    editingRowId === row.projectId ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                                        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), { 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.clientExplanation);
-                                                            setEditingRowId(row.projectId);
-                                                        }, size: "sm", color: "info", className: "ml-6" }))),
-                                                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.clientDocumentLinks && ((_b = row.clientDocumentLinks) === null || _b === void 0 ? void 0 : _b.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) => {
-                                                                        const updatedFiles = p.files.filter((file) => file !== f);
-                                                                        return Object.assign(Object.assign({}, p), { files: updatedFiles });
-                                                                    });
-                                                                    setProjects(updatedFiles);
-                                                                } }));
-                                                    })))),
-                                            react_1.default.createElement("div", { className: "flex flex-row w-[95%] m-2 ml-4 justify-start" },
-                                                react_1.default.createElement(DiscussionThread_1.DiscussionThread, { key: row.projectId, currentUser: user, initialThreads: clientInvoice.chatMessages, createDisputeChatMessage: createDisputeChatMessage }))))))));
-                })))));
+const InvoiceHeader_1 = require("./InvoiceHeader");
+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, }) => {
+    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 }),
+            (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 }))));
 };
 exports.InvoiceCard = InvoiceCard;

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

@@ -0,0 +1,5 @@
+interface InvoiceDetailsProps {
+    invoice: any;
+}
+export declare const InvoiceDetails: ({ invoice }: InvoiceDetailsProps) => JSX.Element;
+export {};

package/lib/components/Invoices/InvoiceDetails.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoiceDetails = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const dayjs_1 = __importDefault(require("dayjs"));
+const DisputeProjectCard_1 = require("./DisputeProjectCard");
+const InvoiceDetails = ({ invoice }) => {
+    var _a;
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'InProgress':
+                return 'warning';
+            case 'UnderReview':
+                return 'info';
+            case 'Resolved':
+                return 'success';
+            default:
+                return 'default';
+        }
+    };
+    return (react_1.default.createElement("div", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+            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'))),
+        ((_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 }))))))));
+};
+exports.InvoiceDetails = InvoiceDetails;

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

@@ -0,0 +1,5 @@
+interface InvoiceHeaderProps {
+    invoice: any;
+}
+export declare const InvoiceHeader: ({ invoice }: InvoiceHeaderProps) => JSX.Element;
+export {};

package/lib/components/Invoices/InvoiceHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoiceHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const InvoiceHeader = ({ invoice }) => {
+    var _a, _b, _c, _d;
+    return (react_1.default.createElement("div", { className: "bg-[#0F172A] text-white px-6 py-4 rounded-t-lg flex items-center justify-between font-arial" },
+        react_1.default.createElement("div", { className: "flex items-center space-x-8" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute 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("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("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 :
+                _c.firstName,
+                " ", (_d = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _d === void 0 ? void 0 :
+                _d.lastName))));
+};
+exports.InvoiceHeader = InvoiceHeader;

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 {};