@paro.io/expert-shared-components 1.12.12 → 1.12.14

package/lib/components/Invoices/InvoiceCard.js

@@ -26,28 +26,46 @@ 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 core_1 = require("@material-ui/core");
+const base_icons_1 = require("@paro.io/base-icons");
 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 ClientDisputeProjectCard_1 = require("./ClientDisputeProjectCard");
-const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceDisputeMutation, documentUploadUrl, downloadDocumentUrl, isInternal = false, bucketName }) => {
+const useStyles = (0, core_1.makeStyles)((theme) => ({
+    accordionSummary: {
+        backgroundColor: '#0F172A',
+        '& .MuiAccordionSummary-expandIcon': {
+            color: 'white',
+        },
+        '&:hover': {
+            backgroundColor: '#1E293B',
+        },
+    },
+}));
+const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceDisputeMutation, documentUploadUrl, downloadDocumentUrl, isInternal = false, isClient = false, bucketName, reactAppUrl }) => {
     var _a, _b;
     const [currentInvoice, setCurrentInvoice] = (0, react_1.useState)(clientInvoice);
+    const classes = useStyles();
     (0, react_1.useEffect)(() => {
         setCurrentInvoice(clientInvoice);
     }, [clientInvoice]);
+    const disputeId = (_b = (_a = currentInvoice === null || currentInvoice === void 0 ? void 0 : currentInvoice.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.disputeId;
     return (react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white rounded-lg shadow-sm overflow-hidden mb-4" },
-        react_1.default.createElement(InvoiceHeader_1.InvoiceHeader, { invoice: currentInvoice }),
-        react_1.default.createElement("div", { className: "p-6 space-y-6" },
-            react_1.default.createElement(InvoiceDetails_1.InvoiceDetails, { invoice: currentInvoice, isInternal: isInternal }),
-            isInternal ?
-                react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: currentInvoice, documentUploadUrl: documentUploadUrl, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName })
-                :
-                    react_1.default.createElement(ClientDisputeProjectCard_1.ClientDisputeProjectCard, { clientInvoice: currentInvoice, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName }),
-            (currentInvoice === null || currentInvoice === void 0 ? void 0 : currentInvoice.chatEnabled) && (react_1.default.createElement(DiscussionSection_1.DiscussionSection, { disputeId: (_b = (_a = currentInvoice === null || currentInvoice === void 0 ? void 0 : currentInvoice.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id, currentUser: user, messages: chatMessages, onCreateMessage: createDisputeChatMessage, isInternal: isInternal })),
-            isInternal &&
-                react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: currentInvoice, onUpdateDispute: updateClientInvoiceDisputeMutation }))));
+        react_1.default.createElement(core_1.Accordion, null,
+            react_1.default.createElement(core_1.AccordionSummary, { expandIcon: react_1.default.createElement(base_icons_1.IconChevronDown, null), "aria-controls": "invoice-content", id: "invoice-header", className: classes.accordionSummary },
+                react_1.default.createElement(InvoiceHeader_1.InvoiceHeader, { invoice: currentInvoice, isInternal: isInternal, isClient: isClient })),
+            react_1.default.createElement(core_1.AccordionDetails, null,
+                react_1.default.createElement("div", { className: "p-6 space-y-6 w-full" },
+                    react_1.default.createElement(InvoiceDetails_1.InvoiceDetails, { invoice: currentInvoice, isInternal: isInternal, isClient: isClient, reactAppUrl: reactAppUrl }),
+                    isInternal ?
+                        react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: currentInvoice, documentUploadUrl: documentUploadUrl, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName })
+                        :
+                            react_1.default.createElement(ClientDisputeProjectCard_1.ClientDisputeProjectCard, { clientInvoice: currentInvoice, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName }),
+                    (currentInvoice === null || currentInvoice === void 0 ? void 0 : currentInvoice.chatEnabled) && disputeId && (react_1.default.createElement(DiscussionSection_1.DiscussionSection, { disputeId: disputeId, currentUser: user, messages: chatMessages, onCreateMessage: createDisputeChatMessage, isInternal: isInternal })),
+                    isInternal &&
+                        react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: currentInvoice, onUpdateDispute: updateClientInvoiceDisputeMutation }))))));
 };
 exports.InvoiceCard = InvoiceCard;

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

@@ -1,6 +1,8 @@
 interface InvoiceDetailsProps {
     invoice: any;
     isInternal: boolean;
+    isClient: boolean;
+    reactAppUrl?: string;
 }
-export declare const InvoiceDetails: ({ invoice, isInternal }: InvoiceDetailsProps) => JSX.Element;
+export declare const InvoiceDetails: ({ invoice, isInternal, isClient, reactAppUrl }: InvoiceDetailsProps) => JSX.Element;
 export {};

package/lib/components/Invoices/InvoiceDetails.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const dayjs_1 = __importDefault(require("dayjs"));
 const DisputeProjectCard_1 = require("./DisputeProjectCard");
 const core_1 = require("@material-ui/core");
-const InvoiceDetails = ({ invoice, isInternal = false }) => {
-    var _a;
+const InvoiceDetails = ({ invoice, isInternal = false, isClient = false, reactAppUrl = 'https://internal.parodev.io' }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const getStatusColor = (status) => {
         switch (status) {
             case 'InProgress':
@@ -22,6 +22,8 @@ const InvoiceDetails = ({ invoice, isInternal = false }) => {
                 return 'primary';
         }
     };
+    const clientInvoiceUrl = `${reactAppUrl}/invoices/${(_a = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _a === void 0 ? void 0 : _a.id}?month=${(_b = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _b === void 0 ? void 0 : _b.month}&companyId=${(_c = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _c === void 0 ? void 0 : _c.clientId}`;
+    const internalInvoiceUrl = `${reactAppUrl}/client/${(_d = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _d === void 0 ? void 0 : _d.clientId}/invoices/${(_e = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _e === void 0 ? void 0 : _e.id}?month=${(_f = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _f === void 0 ? void 0 : _f.month}`;
     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(core_1.Chip, { label: invoice === null || invoice === void 0 ? void 0 : invoice.status, size: "small", variant: "outlined", 
@@ -29,8 +31,9 @@ const InvoiceDetails = ({ invoice, isInternal = false }) => {
                 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('MMM D, YYYY'))),
-        isInternal && ((_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" },
+                (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('MMM D, YYYY')),
+            (isInternal || isClient) && (react_1.default.createElement("a", { href: isInternal ? internalInvoiceUrl : clientInvoiceUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-[#248384] hover:text-[#195C5C]" }, "View Invoice"))),
+        isInternal && ((_g = invoice === null || invoice === void 0 ? void 0 : invoice.disputeProjects) === null || _g === void 0 ? void 0 : _g.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

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

package/lib/components/Invoices/InvoiceHeader.js

@@ -6,24 +6,41 @@ 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" },
+const InvoiceHeader = ({ invoice, isInternal = false, isClient = false }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const disputeAmount = (_a = invoice === null || invoice === void 0 ? void 0 : invoice.disputeProjects) === null || _a === void 0 ? void 0 : _a.reduce((acc, project) => acc + (project === null || project === void 0 ? void 0 : project.disputeAmount), 0);
+    return (react_1.default.createElement("div", { className: "bg-[#0F172A] w-full 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("span", { className: "text-sm font-bold" }, "Dispute Invoice #: "),
+                react_1.default.createElement("span", { className: "ml-2" }, (_b = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _b === void 0 ? void 0 : _b.id)),
+            !isClient && (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Client: "),
+                react_1.default.createElement("span", { className: "ml-2" }, (_c = invoice === null || invoice === void 0 ? void 0 : invoice.client) === null || _c === void 0 ? void 0 : _c.name))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Amount: "),
+                react_1.default.createElement("span", { className: "ml-2" },
+                    "$",
+                    disputeAmount)),
             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))));
+                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)((_d = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _d === void 0 ? void 0 : _d.dateGenerated).format('MMM D, YYYY'))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Status: "),
+                react_1.default.createElement("span", { className: "ml-2" }, (invoice === null || invoice === void 0 ? void 0 : invoice.status) === "InProgress" ? "In Progress" : invoice === null || invoice === void 0 ? void 0 : invoice.status)),
+            (invoice === null || invoice === void 0 ? void 0 : invoice.approvedAmount) && (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Approved Amount: "),
+                react_1.default.createElement("span", { className: "ml-2" },
+                    "$", invoice === null || invoice === void 0 ? void 0 :
+                    invoice.approvedAmount))),
+            !isInternal && (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" }, (_e = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _e === void 0 ? void 0 :
+                    _e.firstName,
+                    " ", (_f = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _f === void 0 ? void 0 :
+                    _f.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 {};