@paro.io/expert-shared-components 1.12.12 → 1.12.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Invoices/DecisionSection.js +4 -2
- package/lib/components/Invoices/InvoiceCard.d.ts +3 -1
- package/lib/components/Invoices/InvoiceCard.js +28 -11
- package/lib/components/Invoices/InvoiceDetails.d.ts +3 -1
- package/lib/components/Invoices/InvoiceDetails.js +7 -4
- package/lib/components/Invoices/InvoiceHeader.d.ts +3 -1
- package/lib/components/Invoices/InvoiceHeader.js +29 -12
- package/package.json +1 -1
|
@@ -45,8 +45,10 @@ const RESOLUTION_OPTIONS = [
|
|
|
45
45
|
{ value: 'PARTIAL', label: 'Partial Approval' },
|
|
46
46
|
];
|
|
47
47
|
const DecisionSection = ({ dispute, onUpdateDispute, }) => {
|
|
48
|
+
var _a;
|
|
49
|
+
const disputeAmount = (_a = dispute === null || dispute === void 0 ? void 0 : dispute.disputeProjects) === null || _a === void 0 ? void 0 : _a.reduce((acc, project) => acc + (project === null || project === void 0 ? void 0 : project.disputeAmount), 0);
|
|
48
50
|
const [resolution, setResolution] = (0, react_1.useState)('');
|
|
49
|
-
const [amount, setAmount] = (0, react_1.useState)(
|
|
51
|
+
const [amount, setAmount] = (0, react_1.useState)(disputeAmount);
|
|
50
52
|
const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
|
|
51
53
|
const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
52
54
|
if (!resolution)
|
|
@@ -57,7 +59,7 @@ const DecisionSection = ({ dispute, onUpdateDispute, }) => {
|
|
|
57
59
|
variables: {
|
|
58
60
|
input: {
|
|
59
61
|
disputeId: dispute.disputeId,
|
|
60
|
-
status: "Resolved",
|
|
62
|
+
status: "Resolved", //To-Do - Fix with actual status
|
|
61
63
|
approvedAmount: amount ? parseFloat(amount) : undefined,
|
|
62
64
|
},
|
|
63
65
|
},
|
|
@@ -7,7 +7,9 @@ interface InvoiceCardProps {
|
|
|
7
7
|
documentUploadUrl: string;
|
|
8
8
|
downloadDocumentUrl: string;
|
|
9
9
|
isInternal?: boolean;
|
|
10
|
+
isClient?: boolean;
|
|
10
11
|
bucketName?: string;
|
|
12
|
+
reactAppUrl?: string;
|
|
11
13
|
}
|
|
12
|
-
export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceDisputeMutation, documentUploadUrl, downloadDocumentUrl, isInternal, bucketName }: InvoiceCardProps) => JSX.Element;
|
|
14
|
+
export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceDisputeMutation, documentUploadUrl, downloadDocumentUrl, isInternal, isClient, bucketName, reactAppUrl }: InvoiceCardProps) => JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -26,28 +26,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.InvoiceCard = void 0;
|
|
27
27
|
const react_1 = __importStar(require("react"));
|
|
28
28
|
const base_ui_1 = require("@paro.io/base-ui");
|
|
29
|
+
const core_1 = require("@material-ui/core");
|
|
30
|
+
const base_icons_1 = require("@paro.io/base-icons");
|
|
29
31
|
const InvoiceHeader_1 = require("./InvoiceHeader");
|
|
30
32
|
const InvoiceDetails_1 = require("./InvoiceDetails");
|
|
31
33
|
const DisputeSection_1 = require("./DisputeSection");
|
|
32
34
|
const DiscussionSection_1 = require("./DiscussionSection");
|
|
33
35
|
const DecisionSection_1 = require("./DecisionSection");
|
|
34
36
|
const ClientDisputeProjectCard_1 = require("./ClientDisputeProjectCard");
|
|
35
|
-
const
|
|
37
|
+
const useStyles = (0, core_1.makeStyles)((theme) => ({
|
|
38
|
+
accordionSummary: {
|
|
39
|
+
backgroundColor: '#0F172A',
|
|
40
|
+
'& .MuiAccordionSummary-expandIcon': {
|
|
41
|
+
color: 'white',
|
|
42
|
+
},
|
|
43
|
+
'&:hover': {
|
|
44
|
+
backgroundColor: '#1E293B',
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
}));
|
|
48
|
+
const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceDisputeMutation, documentUploadUrl, downloadDocumentUrl, isInternal = false, isClient = false, bucketName, reactAppUrl }) => {
|
|
36
49
|
var _a, _b;
|
|
37
50
|
const [currentInvoice, setCurrentInvoice] = (0, react_1.useState)(clientInvoice);
|
|
51
|
+
const classes = useStyles();
|
|
38
52
|
(0, react_1.useEffect)(() => {
|
|
39
53
|
setCurrentInvoice(clientInvoice);
|
|
40
54
|
}, [clientInvoice]);
|
|
41
55
|
return (react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white rounded-lg shadow-sm overflow-hidden mb-4" },
|
|
42
|
-
react_1.default.createElement(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
react_1.default.createElement(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
react_1.default.createElement(core_1.Accordion, null,
|
|
57
|
+
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 },
|
|
58
|
+
react_1.default.createElement(InvoiceHeader_1.InvoiceHeader, { invoice: currentInvoice, isInternal: isInternal, isClient: isClient })),
|
|
59
|
+
react_1.default.createElement(core_1.AccordionDetails, null,
|
|
60
|
+
react_1.default.createElement("div", { className: "p-6 space-y-6 w-full" },
|
|
61
|
+
react_1.default.createElement(InvoiceDetails_1.InvoiceDetails, { invoice: currentInvoice, isInternal: isInternal, isClient: isClient, reactAppUrl: reactAppUrl }),
|
|
62
|
+
isInternal ?
|
|
63
|
+
react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: currentInvoice, documentUploadUrl: documentUploadUrl, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName })
|
|
64
|
+
:
|
|
65
|
+
react_1.default.createElement(ClientDisputeProjectCard_1.ClientDisputeProjectCard, { clientInvoice: currentInvoice, updateClientInvoiceDisputeMutation: updateClientInvoiceDisputeMutation, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, bucketName: bucketName }),
|
|
66
|
+
(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 })),
|
|
67
|
+
isInternal &&
|
|
68
|
+
react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: currentInvoice, onUpdateDispute: updateClientInvoiceDisputeMutation }))))));
|
|
52
69
|
};
|
|
53
70
|
exports.InvoiceCard = InvoiceCard;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
interface InvoiceDetailsProps {
|
|
2
2
|
invoice: any;
|
|
3
3
|
isInternal: boolean;
|
|
4
|
+
isClient: boolean;
|
|
5
|
+
reactAppUrl?: string;
|
|
4
6
|
}
|
|
5
|
-
export declare const InvoiceDetails: ({ invoice, isInternal }: InvoiceDetailsProps) => JSX.Element;
|
|
7
|
+
export declare const InvoiceDetails: ({ invoice, isInternal, isClient, reactAppUrl }: InvoiceDetailsProps) => JSX.Element;
|
|
6
8
|
export {};
|
|
@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
9
9
|
const DisputeProjectCard_1 = require("./DisputeProjectCard");
|
|
10
10
|
const core_1 = require("@material-ui/core");
|
|
11
|
-
const InvoiceDetails = ({ invoice, isInternal = false }) => {
|
|
12
|
-
var _a;
|
|
11
|
+
const InvoiceDetails = ({ invoice, isInternal = false, isClient = false, reactAppUrl = 'https://internal.parodev.io' }) => {
|
|
12
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
13
13
|
const getStatusColor = (status) => {
|
|
14
14
|
switch (status) {
|
|
15
15
|
case 'InProgress':
|
|
@@ -22,6 +22,8 @@ const InvoiceDetails = ({ invoice, isInternal = false }) => {
|
|
|
22
22
|
return 'primary';
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
+
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}`;
|
|
26
|
+
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}`;
|
|
25
27
|
return (react_1.default.createElement("div", { className: "space-y-6" },
|
|
26
28
|
react_1.default.createElement("div", { className: "flex items-center space-x-4" },
|
|
27
29
|
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 }) => {
|
|
|
29
31
|
color: getStatusColor(invoice === null || invoice === void 0 ? void 0 : invoice.status) }),
|
|
30
32
|
react_1.default.createElement("span", { className: "text-xs text-[#666666]" },
|
|
31
33
|
"Last updated: ",
|
|
32
|
-
(0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('MMM D, YYYY'))
|
|
33
|
-
|
|
34
|
+
(0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('MMM D, YYYY')),
|
|
35
|
+
(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"))),
|
|
36
|
+
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" },
|
|
34
37
|
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 }))))))));
|
|
35
38
|
};
|
|
36
39
|
exports.InvoiceDetails = InvoiceDetails;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
interface InvoiceHeaderProps {
|
|
2
2
|
invoice: any;
|
|
3
|
+
isInternal: boolean;
|
|
4
|
+
isClient: boolean;
|
|
3
5
|
}
|
|
4
|
-
export declare const InvoiceHeader: ({ invoice }: InvoiceHeaderProps) => JSX.Element;
|
|
6
|
+
export declare const InvoiceHeader: ({ invoice, isInternal, isClient }: InvoiceHeaderProps) => JSX.Element;
|
|
5
7
|
export {};
|
|
@@ -6,24 +6,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.InvoiceHeader = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
9
|
-
const InvoiceHeader = ({ invoice }) => {
|
|
10
|
-
var _a, _b, _c, _d;
|
|
11
|
-
|
|
9
|
+
const InvoiceHeader = ({ invoice, isInternal = false, isClient = false }) => {
|
|
10
|
+
var _a, _b, _c, _d, _e, _f;
|
|
11
|
+
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);
|
|
12
|
+
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" },
|
|
12
13
|
react_1.default.createElement("div", { className: "flex items-center space-x-8" },
|
|
13
14
|
react_1.default.createElement("div", null,
|
|
14
|
-
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Invoice
|
|
15
|
-
react_1.default.createElement("span", { className: "ml-2" }, (
|
|
15
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Invoice #: "),
|
|
16
|
+
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)),
|
|
17
|
+
!isClient && (react_1.default.createElement("div", null,
|
|
18
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Client: "),
|
|
19
|
+
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))),
|
|
20
|
+
react_1.default.createElement("div", null,
|
|
21
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Amount: "),
|
|
22
|
+
react_1.default.createElement("span", { className: "ml-2" },
|
|
23
|
+
"$",
|
|
24
|
+
disputeAmount)),
|
|
16
25
|
react_1.default.createElement("div", null,
|
|
17
26
|
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Date: "),
|
|
18
27
|
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'))),
|
|
19
28
|
react_1.default.createElement("div", null,
|
|
20
29
|
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Invoice Date: "),
|
|
21
|
-
react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)((
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
|
|
30
|
+
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'))),
|
|
31
|
+
react_1.default.createElement("div", null,
|
|
32
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Status: "),
|
|
33
|
+
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)),
|
|
34
|
+
(invoice === null || invoice === void 0 ? void 0 : invoice.approvedAmount) && (react_1.default.createElement("div", null,
|
|
35
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Approved Amount: "),
|
|
36
|
+
react_1.default.createElement("span", { className: "ml-2" },
|
|
37
|
+
"$", invoice === null || invoice === void 0 ? void 0 :
|
|
38
|
+
invoice.approvedAmount))),
|
|
39
|
+
!isInternal && (react_1.default.createElement("div", null,
|
|
40
|
+
react_1.default.createElement("span", { className: "text-sm font-bold" }, "Expert Name: "),
|
|
41
|
+
react_1.default.createElement("span", { className: "ml-2" }, (_e = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _e === void 0 ? void 0 :
|
|
42
|
+
_e.firstName,
|
|
43
|
+
" ", (_f = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _f === void 0 ? void 0 :
|
|
44
|
+
_f.lastName))))));
|
|
28
45
|
};
|
|
29
46
|
exports.InvoiceHeader = InvoiceHeader;
|