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

package/lib/components/Invoices/InvoiceCard.js

@@ -0,0 +1,220 @@
+"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.InvoiceCard = void 0;
+const react_1 = __importStar(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 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 = ({ invoice }) => {
+    const [expandRow, setExpandRow] = (0, react_1.useState)(null);
+    const classes = useStyles();
+    const [projects, setProjects] = (0, react_1.useState)(invoice.projectDetails);
+    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) => {
+            if (project.projectId === expandRow) {
+                return Object.assign(Object.assign({}, project), { files: [...project.files, ...e.filter((name) => !project.files.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, "files");
+        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("b", null,
+                "Dispute Invoice #",
+                invoice.invoiceId),
+            react_1.default.createElement("p", null,
+                "Disputed: ",
+                invoice.disputedDate),
+            react_1.default.createElement("p", null,
+                "Invoice Date: ",
+                invoice.invoiceDate),
+            react_1.default.createElement("p", null,
+                "Expert: ",
+                invoice.expertName)),
+        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.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.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 },
+                            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), { explanation: 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);
+                                                        setEditingRowId(row.projectId);
+                                                    }, size: "sm", color: "info", className: "ml-6" }))),
+                                            react_1.default.createElement("p", null, row.explanation),
+                                            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) => {
+                                                    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("b", { className: "ml-8 mt-4 mr-auto" }, "Discussion: "),
+                                        react_1.default.createElement(base_ui_1.Card, { className: `bg-[#EFF6FF] m-2 md:mx-8 flex md:flex justify-start rounded flex-col w-[95%] p-4` }, row.discussion.map((obj) => {
+                                            return obj.paroSupport ?
+                                                react_1.default.createElement("div", { className: "flex flex-row w-[80%] justify-start" },
+                                                    react_1.default.createElement("div", { className: "flex justify-center items-center bg-[#26A69A] h-12 w-12 rounded-full text-2xl text-white" }, "PS"),
+                                                    react_1.default.createElement("div", { className: "flex flex-col items-start ml-4" },
+                                                        react_1.default.createElement("b", null,
+                                                            "Paro Support: ",
+                                                            react_1.default.createElement("span", null, "Apr 3, 2025")),
+                                                        " ",
+                                                        react_1.default.createElement("p", null, "We've received your dispute and are reviewing the timesheet discrepancies."),
+                                                        react_1.default.createElement("p", null, "We'll follow up with the expert and update you by Apr 5."),
+                                                        react_1.default.createElement("p", null, obj.paroSupport)))
+                                                :
+                                                    react_1.default.createElement("div", { className: "flex flex-row-reverse w-[85%] justify-items-end items-center ml-auto my-1" },
+                                                        react_1.default.createElement("div", { className: "flex justify-center items-center bg-[#4cbaff] h-12 w-12 rounded-full text-2xl text-white ml-4" }, "A"),
+                                                        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(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
+                                                        ? Object.assign(Object.assign({}, p), { discussion: [...p.discussion, { you: discussion }] }) : p));
+                                                    setEditingRowId(null);
+                                                    setDiscussion('');
+                                                } })))))))))))));
+};
+exports.InvoiceCard = InvoiceCard;

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

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

package/lib/components/Invoices/index.js

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

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