@paro.io/expert-shared-components 1.4.11 → 1.5.0

package/lib/components/DocumentCenter/ClientDocumentsTable.d.ts

@@ -0,0 +1,18 @@
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"container" | "tableCell" | "tableRow" | "tableCellBorder" | "shade">;
+interface ClientDocumentTableProps {
+    legacyFreelancerId: number | number[];
+    expertFiles: any[];
+    setExpertClientFiles: (expertFiles: any[]) => void;
+    clientAndProjectsList: any[];
+    uploadExpertClientFiles: any;
+    updateFileLastViewed: any;
+    deleteExpertClientFile: any;
+    paroDocuments: boolean;
+    freelancerName: string;
+    freelancerEmail: string;
+    getFileLazyQuery: any;
+    expertClientFilesLazyQuery: any;
+    isClientPortal: boolean;
+}
+export declare const ClientDocumentsTable: ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, }: ClientDocumentTableProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/ClientDocumentsTable.js

@@ -0,0 +1,378 @@
+"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 __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.ClientDocumentsTable = exports.useStyles = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
+const DocumentUploadRow_1 = require("./DocumentUploadRow");
+const base_icons_1 = require("@paro.io/base-icons");
+const DeleteDocumentModal_1 = require("./DeleteDocumentModal");
+const utils_1 = require("../shared/utils");
+exports.useStyles = (0, core_1.makeStyles)({
+    tableCell: {
+        whiteSpace: 'normal',
+        border: '1px solid #E2E8F0',
+        padding: '10px'
+    },
+    tableRow: {
+        height: 40
+    },
+    container: {
+        overflow: 'auto',
+        padding: 10,
+        width: '100%',
+        borderRadius: '12px',
+        margin: '12px'
+    },
+    tableCellBorder: {
+        whiteSpace: 'nowrap',
+        border: '1px solid #E2E8F0'
+    },
+    shade: {
+        backgroundColor: '#D9EFEF'
+    }
+});
+function descendingComparator(a, b, orderBy) {
+    var _a, _b, _c, _d, _e, _f;
+    if (orderBy === 'docSize') {
+        //@ts-ignore
+        const sizeA = (_a = a === null || a === void 0 ? void 0 : a.docSize) !== null && _a !== void 0 ? _a : 0;
+        //@ts-ignore
+        const sizeB = (_b = b === null || b === void 0 ? void 0 : b.docSize) !== null && _b !== void 0 ? _b : 0;
+        if (sizeB < sizeA) {
+            return -1;
+        }
+        if (sizeB > sizeA) {
+            return 1;
+        }
+        return 0;
+    }
+    else if (orderBy === 'uploadedDate' || orderBy === 'lastViewed') {
+        //@ts-ignore
+        const dateA = a === null || a === void 0 ? void 0 : a[orderBy];
+        //@ts-ignore
+        const dateB = b === null || b === void 0 ? void 0 : b[orderBy];
+        //@ts-ignore
+        if (dateB < dateA) {
+            return -1;
+        }
+        //@ts-ignore
+        if (dateB > dateA) {
+            return 1;
+        }
+        return 0;
+    }
+    else if (orderBy === 'clientName') {
+        //@ts-ignore
+        const clientA = (_c = a === null || a === void 0 ? void 0 : a.clientName) !== null && _c !== void 0 ? _c : "";
+        //@ts-ignore
+        const clientB = (_d = b === null || b === void 0 ? void 0 : b.clientName) !== null && _d !== void 0 ? _d : "";
+        if (clientB < clientA) {
+            return -1;
+        }
+        if (clientB > clientA) {
+            return 1;
+        }
+        return 0;
+    }
+    else if (orderBy === 'fileName' || orderBy === 'docType' || orderBy === 'projectName' || orderBy === 'uploadedBy') {
+        //@ts-ignore
+        const valueA = (_e = a === null || a === void 0 ? void 0 : a[orderBy]) !== null && _e !== void 0 ? _e : "";
+        //@ts-ignore
+        const valueB = (_f = b === null || b === void 0 ? void 0 : b[orderBy]) !== null && _f !== void 0 ? _f : "";
+        if (valueB < valueA) {
+            return -1;
+        }
+        if (valueB > valueA) {
+            return 1;
+        }
+        return 0;
+    }
+    else {
+        (0, utils_1.compareItems)(a, b, orderBy);
+    }
+}
+const getKeyByValue = (object, value) => {
+    if (!value) {
+        return '-';
+    }
+    return Object.keys(object).find(key => object[key] === value);
+};
+const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, }) => {
+    const classes = (0, exports.useStyles)();
+    const [order, setOrder] = react_1.default.useState('desc');
+    const [orderBy, setOrderBy] = react_1.default.useState('lastViewed');
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [perPageItems, setPerPageItems] = (0, react_1.useState)(10);
+    const [files, setFiles] = (0, react_1.useState)(expertFiles);
+    const [clientAndProject, setClientAndProject] = (0, react_1.useState)('');
+    const [docType, setDocType] = (0, react_1.useState)('');
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [downloadFilename, setDownloadFilename] = (0, react_1.useState)('');
+    const [isDeleteModalOpen, setDeleteModalOpen] = (0, react_1.useState)(false);
+    const [deleteFileName, setDeleteFileName] = (0, react_1.useState)('');
+    const [fileData, setFileData] = (0, react_1.useState)('');
+    const [fileId, setFileId] = (0, react_1.useState)(null);
+    const firstItem = (currentPage - 1) * perPageItems;
+    const lastItem = (currentPage - 1) * perPageItems + perPageItems;
+    const headCells = (0, react_1.useMemo)(() => [
+        { id: 'fileName', label: 'File Name' },
+        { id: 'docType', label: 'Document Type' },
+        { id: 'docSize', label: 'Document Size' },
+        {
+            id: isClientPortal ? 'expertName' : 'clientName',
+            label: isClientPortal ? 'Expert Name' : 'Client Name',
+        },
+        { id: 'projectName', label: 'Project Name' },
+        { id: 'projectStatus', label: 'Project Status' },
+        { id: 'uploadedDate', label: 'Uploaded Date' },
+        { id: 'uploadedBy', label: 'Uploaded By' },
+        { id: 'lastViewed', label: 'Last Viewed' },
+    ], [isClientPortal]);
+    const tableData = (files === null || files === void 0 ? void 0 : files.length) ? files === null || files === void 0 ? void 0 : files.map((file) => {
+        return {
+            fileId: file === null || file === void 0 ? void 0 : file.id,
+            fileName: (file === null || file === void 0 ? void 0 : file.fileName) || "-",
+            docType: getKeyByValue(utils_1.DOCUMENT_TYPE_CONSTANTS, file === null || file === void 0 ? void 0 : file.fileType) || "-",
+            docSize: Math.ceil((file === null || file === void 0 ? void 0 : file.fileSize) / 1000000) || 0,
+            clientName: (file === null || file === void 0 ? void 0 : file.clientName) || "-",
+            expertName: (file === null || file === void 0 ? void 0 : file.freelancerName) || "-",
+            projectName: (file === null || file === void 0 ? void 0 : file.projectName) || "-",
+            projectStatus: file === null || file === void 0 ? void 0 : file.projectStatus,
+            uploadedDate: (0, utils_1.formatDate)(file === null || file === void 0 ? void 0 : file.uploadedDate),
+            uploadedBy: (file === null || file === void 0 ? void 0 : file.uploadedBy) || "-",
+            lastViewed: (file === null || file === void 0 ? void 0 : file.lastViewed) ? (0, utils_1.formatDate)(file === null || file === void 0 ? void 0 : file.lastViewed) : 'Not opened',
+            projectId: file === null || file === void 0 ? void 0 : file.projectId,
+        };
+    }) : [];
+    (0, react_1.useEffect)(() => {
+        const sortByTextProjects = searchText === ''
+            ? expertFiles
+            : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.filter((p) => {
+                var _a, _b, _c;
+                return ((_a = p === null || p === void 0 ? void 0 : p.clientName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchText.toLowerCase())) ||
+                    ((_b = p === null || p === void 0 ? void 0 : p.projectName) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchText.toLowerCase())) ||
+                    ((_c = p === null || p === void 0 ? void 0 : p.fileName) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchText.toLowerCase()));
+            });
+        setFiles(sortByTextProjects);
+    }, [searchText]);
+    const getFileData = (_a) => __awaiter(void 0, [_a], void 0, function* ({ fileName, folderName }) {
+        var _b, _c;
+        const fileData = yield getFileLazyQuery({
+            skip: !downloadFilename,
+            variables: {
+                input: {
+                    foldername: folderName,
+                    filename: fileName,
+                    isClientFile: true, // to fetch data from new s3 bucket
+                },
+            },
+        });
+        if ((_c = (_b = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _b === void 0 ? void 0 : _b.getFile) === null || _c === void 0 ? void 0 : _c.data) {
+            (0, utils_1.showToast)('success', 'File Data fetched successfully!');
+            setFileData(fileData);
+        }
+        else {
+            (0, utils_1.showToast)('warning', 'Failed to fetch file data! Please try again.');
+        }
+    });
+    const refetchFiles = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            const freelancerIds = Array.isArray(legacyFreelancerId) ? legacyFreelancerId : [legacyFreelancerId];
+            const { data } = yield expertClientFilesLazyQuery({
+                variables: { freelancerIds },
+                fetchPolicy: 'network-only',
+            });
+            setExpertClientFiles((_a = data === null || data === void 0 ? void 0 : data.getExpertClientFiles) === null || _a === void 0 ? void 0 : _a.files);
+            setFiles((_b = data === null || data === void 0 ? void 0 : data.getExpertClientFiles) === null || _b === void 0 ? void 0 : _b.files);
+        }
+        catch (error) {
+            console.error('Error refetching query:', error);
+        }
+    });
+    const updateLastViewed = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield updateFileLastViewed({
+            variables: {
+                input: {
+                    fileId: fileId,
+                    lastViewed: new Date().toISOString(),
+                },
+            }
+        }).then(() => {
+            refetchFiles();
+        });
+    });
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!fileData || !fileData.data || !fileData.data.getFile || !fileData.data.getFile.data) {
+            console.error("Invalid file data.");
+            return;
+        }
+        try {
+            const a = document.createElement('a');
+            const mimeType = (0, utils_1.getFileMimeType)(downloadFilename);
+            if (mimeType === 'application/pdf') {
+                // handle pdf type files
+                (0, utils_1.handleDownloadPdf)({ fileData, downloadFilename });
+                updateLastViewed();
+            }
+            else {
+                // handle other type files
+                a.href = `data:${mimeType};base64,${(_b = (_a = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _a === void 0 ? void 0 : _a.getFile) === null || _b === void 0 ? void 0 : _b.data}`;
+                a.download = downloadFilename;
+                a.click();
+                updateLastViewed();
+            }
+        }
+        catch (error) {
+            console.error('Error downloading file:', error);
+            (0, utils_1.showToast)('warning', 'Failed to download file! Please try again.');
+        }
+        finally {
+            setDownloadFilename('');
+            setFileData('');
+            setFileId(null);
+        }
+    }, [fileData]);
+    const handleRequestSort = (event, property) => {
+        const isDesc = orderBy === property && order === 'desc';
+        setOrder(isDesc ? 'asc' : 'desc');
+        setOrderBy(property);
+    };
+    const createSortHandler = (property) => (event) => {
+        handleRequestSort(event, property);
+    };
+    const handleDelete = () => {
+        deleteExpertClientFile({
+            variables: {
+                input: {
+                    fileId: fileId,
+                },
+            }
+        })
+            .then(() => {
+            toggleDeleteModal(deleteFileName, fileId);
+            refetchFiles();
+            (0, utils_1.showToast)('success', 'File deleted successfully!');
+            setFileId(null);
+        })
+            .catch((err) => {
+            toggleDeleteModal(deleteFileName, fileId);
+            console.error(`Error deleting file ${err}`);
+            (0, utils_1.showToast)('warning', 'Failed to delete file! Please retry.');
+            setFileId(null);
+        });
+    };
+    const handleDownloadFile = (fileName, fileId, projectId) => __awaiter(void 0, void 0, void 0, function* () {
+        (0, utils_1.showToast)('success', 'Starting File Download...');
+        fileId && setFileId(fileId);
+        if (fileName) {
+            setDownloadFilename(fileName);
+            const folderName = `project-${projectId}`;
+            yield getFileData({ fileName, folderName });
+        }
+    });
+    const toggleDeleteModal = (fileName, fileId) => {
+        setDeleteModalOpen(!isDeleteModalOpen);
+        if (fileName) {
+            setDeleteFileName(fileName);
+        }
+        fileId && setFileId(fileId);
+    };
+    return (react_1.default.createElement(utils_1.CustomPaper, null,
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, uploadExpertClientFiles: uploadExpertClientFiles, refetchFiles: refetchFiles, legacyFreelancerId: legacyFreelancerId, freelancerName: freelancerName, freelancerEmail: freelancerEmail, isClientPortal: isClientPortal }),
+        react_1.default.createElement(core_1.Box, { mt: 2 }, (files === null || files === void 0 ? void 0 : files.length) > 0 ? react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
+            react_1.default.createElement(core_1.TableHead, null,
+                react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
+                    headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
+                        react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
+                            react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
+                                react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
+                                    react_1.default.createElement("b", null, headCell.label)),
+                                orderBy === headCell.id && null))))),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
+            react_1.default.createElement(core_1.TableBody, null, (0, utils_1.stableSort)(tableData, (0, utils_1.getComparator)(order, orderBy, descendingComparator)).slice(firstItem, lastItem).map((row, index) => {
+                const { fileId, fileName, docType, docSize, clientName, expertName, projectName, projectStatus, uploadedDate, uploadedBy, lastViewed, projectId } = row;
+                return (react_1.default.createElement(core_1.TableRow, { key: fileId },
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
+                        react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName, fileId, projectId), style: {
+                                color: 'blue',
+                                textDecoration: 'underline',
+                                cursor: 'pointer',
+                            } }, fileName)),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
+                        docSize.toFixed(1),
+                        " MB"),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, isClientPortal ? expertName : clientName),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectName),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectStatus),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, `${uploadedBy.charAt(0)}${uploadedBy.slice(1).toLowerCase()}`),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, lastViewed),
+                    react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
+                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
+                            react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
+                                react_1.default.createElement(core_1.IconButton, { onClick: () => __awaiter(void 0, void 0, void 0, function* () { return handleDownloadFile(fileName, fileId, projectId); }) },
+                                    " ",
+                                    react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
+                                    " ")),
+                            (isClientPortal ? uploadedBy === 'CLIENT' : uploadedBy === 'FREELANCER') && react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: `This will delete the document for you and the ${isClientPortal ? 'Expert' : 'Client'}` },
+                                react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName, fileId) },
+                                    " ",
+                                    react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
+                                    " "))))));
+            })))
+            :
+                react_1.default.createElement(core_1.Box, null,
+                    react_1.default.createElement(core_1.Divider, null),
+                    react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
+                    react_1.default.createElement(core_1.Typography, { variant: "body1", align: 'center' }, "You haven\u2019t uploaded any documents yet. Click above and upload any .pdf , .doc, .docx, .ppt, .xls, .xlsx file."))),
+        (expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
+            react_1.default.createElement(Pagination_1.default, { total: expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })),
+        react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: (react_1.default.createElement(react_1.default.Fragment, null,
+                "Are you sure you want to delete document ",
+                react_1.default.createElement("strong", null, deleteFileName),
+                " ?",
+                react_1.default.createElement("br", null),
+                "If you continue, this document will no longer be available.")) })));
+};
+exports.ClientDocumentsTable = ClientDocumentsTable;

package/lib/components/DocumentCenter/DeleteDocumentModal.d.ts

@@ -0,0 +1,8 @@
+interface DeleteDocumentModalProps {
+    isDeleteModalOpen: boolean;
+    setDeleteModalOpen: (isDeleteModalOpen: boolean) => void;
+    handleDelete: any;
+    content: any;
+}
+export declare const DeleteDocumentModal: ({ isDeleteModalOpen, setDeleteModalOpen, handleDelete, content, }: DeleteDocumentModalProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/DeleteDocumentModal.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteDocumentModal = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const base_icons_1 = require("@paro.io/base-icons");
+const DeleteDocumentModal = ({ isDeleteModalOpen, setDeleteModalOpen, handleDelete, content, }) => {
+    return (react_1.default.createElement(base_ui_1.Modal, { variant: base_ui_1.ModalVariant.transactional, label: "Delete Document?", color: "danger", open: isDeleteModalOpen, onClose: () => setDeleteModalOpen(!isDeleteModalOpen), icon: "danger", iconCustom: react_1.default.createElement(base_icons_1.IconExclamation, null), size: "md", onPrimaryButtonClickHandler: handleDelete }, content));
+};
+exports.DeleteDocumentModal = DeleteDocumentModal;

package/lib/components/DocumentCenter/DocumentCenter.d.ts

@@ -0,0 +1,23 @@
+interface DocumentCenterProps {
+    legacyFreelancerId: number | number[];
+    openModal: boolean;
+    setOpenModal: (openModal: boolean) => void;
+    expertClientFilesLazyQuery: any;
+    getClientAndProjectsLazyQuery?: any;
+    uploadExpertClientFiles: any;
+    uploadFileData?: any;
+    deleteFileMutation?: any;
+    updateFreelancerExpiryMutation?: any;
+    updateFileLastViewed: any;
+    deleteExpertClientFile: any;
+    foldername?: string;
+    getFilesLazyQuery?: any;
+    getFileLazyQuery: any;
+    freelancerName?: string;
+    freelancerEmail?: string;
+    isClientPortal?: boolean;
+    expertProjectsList?: any[];
+    getFreelancerLazyQuery?: any;
+}
+export declare const DocumentCenter: ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal, expertProjectsList, getFreelancerLazyQuery, }: DocumentCenterProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/DocumentCenter.js

@@ -0,0 +1,185 @@
+"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 __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.DocumentCenter = void 0;
+const react_1 = __importStar(require("react"));
+const ClientDocumentsTable_1 = require("./ClientDocumentsTable");
+const ParoDocumentsTable_1 = require("./ParoDocumentsTable");
+const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
+const core_1 = require("@material-ui/core");
+const Close_1 = __importDefault(require("@material-ui/icons/Close"));
+const lab_1 = require("@material-ui/lab");
+const react_hot_toast_1 = require("react-hot-toast");
+const utils_1 = require("../shared/utils");
+const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        backgroundColor: '#060821',
+        padding: '12px',
+        maxWidth: '80vw',
+        height: '80vh',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        [theme.breakpoints.down('md')]: {
+            width: '100vw',
+            maxWidth: '100vw',
+        },
+    }
+}));
+const CustomDialogContent = (0, core_1.styled)(core_1.DialogContent)(({ theme }) => ({
+    overflow: 'auto',
+    padding: '12px',
+    scrollbarWidth: 'auto', // For Firefox
+    '-ms-overflow-style': 'auto', // For IE 10+
+    '&::-webkit-scrollbar': {
+        width: '6px',
+        height: '6px',
+    },
+    '&::-webkit-scrollbar-track': {
+        background: '#f1f1f1',
+        borderRaius: '4px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        background: '#C1C1C1',
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: '#707070',
+    },
+}));
+const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal = false, expertProjectsList, getFreelancerLazyQuery, }) => {
+    var _a;
+    const [value, setValue] = (0, react_1.useState)(0);
+    const [expertClientFiles, setExpertClientFiles] = (0, react_1.useState)([]);
+    const [expertFiles, setExpertFiles] = (0, react_1.useState)([]);
+    const [clientAndProjects, setClientAndProjects] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [insuranceExpiryDate, setInsuranceExpiryDate] = (0, react_1.useState)();
+    const fetchQueries = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        try {
+            setLoading(true);
+            const freelancerIds = Array.isArray(legacyFreelancerId) ? legacyFreelancerId : [legacyFreelancerId];
+            let clientFiles = [];
+            let clientAndProjects = [];
+            let expertFiles = [];
+            let expiryDate = [];
+            if (isClientPortal) {
+                const clientFilesResponse = yield expertClientFilesLazyQuery({ variables: { freelancerIds }, fetchPolicy: 'network-only', });
+                clientFiles = (_c = (_b = (_a = clientFilesResponse === null || clientFilesResponse === void 0 ? void 0 : clientFilesResponse.data) === null || _a === void 0 ? void 0 : _a.getExpertClientFiles) === null || _b === void 0 ? void 0 : _b.files) !== null && _c !== void 0 ? _c : [];
+            }
+            else {
+                const [clientFilesResponse, clientAndProjectsResponse, expertFilesResponse, freelancerData] = yield Promise.all([
+                    expertClientFilesLazyQuery && expertClientFilesLazyQuery({ variables: { freelancerIds }, fetchPolicy: 'network-only', }),
+                    getClientAndProjectsLazyQuery && getClientAndProjectsLazyQuery({ variables: { legacyFreelancerId: legacyFreelancerId, forReviews: true }, fetchPolicy: 'network-only', }),
+                    getFilesLazyQuery && getFilesLazyQuery({ variables: { input: { foldername: foldername }, fetchPolicy: 'network-only', } }),
+                    getFreelancerLazyQuery && getFreelancerLazyQuery({ variables: { id: legacyFreelancerId }, fetchPolicy: 'network-only', })
+                ]);
+                clientFiles = (_f = (_e = (_d = clientFilesResponse === null || clientFilesResponse === void 0 ? void 0 : clientFilesResponse.data) === null || _d === void 0 ? void 0 : _d.getExpertClientFiles) === null || _e === void 0 ? void 0 : _e.files) !== null && _f !== void 0 ? _f : [];
+                clientAndProjects = (_h = (_g = clientAndProjectsResponse === null || clientAndProjectsResponse === void 0 ? void 0 : clientAndProjectsResponse.data) === null || _g === void 0 ? void 0 : _g.getParoProjects) !== null && _h !== void 0 ? _h : [];
+                expertFiles = (_k = (_j = expertFilesResponse === null || expertFilesResponse === void 0 ? void 0 : expertFilesResponse.data) === null || _j === void 0 ? void 0 : _j.getFiles) !== null && _k !== void 0 ? _k : [];
+                expiryDate = (_m = (_l = freelancerData === null || freelancerData === void 0 ? void 0 : freelancerData.data) === null || _l === void 0 ? void 0 : _l.getFreelancer) === null || _m === void 0 ? void 0 : _m.insuranceExpiryDate;
+            }
+            const filterProjects = clientAndProjects.filter((p) => p.status !== 'Complete');
+            setExpertClientFiles(clientFiles);
+            setClientAndProjects(isClientPortal ? expertProjectsList : filterProjects);
+            setExpertFiles(expertFiles);
+            setInsuranceExpiryDate(expiryDate ? (0, utils_1.formatDate)(expiryDate) : '');
+        }
+        catch (error) {
+            console.error("Error fetching queries:", error);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (openModal) {
+            fetchQueries();
+        }
+    }, [openModal]);
+    const handleChange = (event, newValue) => {
+        if (newValue >= 0) {
+            setValue(newValue);
+        }
+    };
+    const headerText = isClientPortal ?
+        'Streamline document sharing and collaboration between you and the Experts you work with. <br /> Easily upload, download, organize, and exchange financial documents, contracts, and project materials in a secure, centralized hub.'
+        :
+            'Streamline document sharing and collaboration between you the Expert, Clients you work with, and Paro. <br /> Easily upload, download, organize, and exchange financial documents, contracts, and project materials in a secure, centralized hub.';
+    return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
+                react_1.default.createElement(core_1.Box, { p: 2 },
+                    react_1.default.createElement(core_1.Typography, { variant: "h6" },
+                        react_1.default.createElement(core_1.Box, { style: { color: 'white', fontWeight: 'bold' } }, "Document Center")),
+                    react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                        react_1.default.createElement(core_1.Box, { style: { color: 'white' }, dangerouslySetInnerHTML: { __html: headerText } }))),
+                react_1.default.createElement(core_1.Box, { style: { position: 'absolute', top: 0, right: 0 } },
+                    react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
+                        react_1.default.createElement(core_1.Box, { style: { backgroundColor: 'white', width: 40, height: 40, borderRadius: '4px' } },
+                            react_1.default.createElement(Close_1.default, null))))),
+            react_1.default.createElement(CustomDialogContent, { style: { width: '100%' } }, loading
+                ?
+                    react_1.default.createElement(core_1.CircularProgress, { size: 24 })
+                :
+                    react_1.default.createElement(lab_1.TabContext, { value: value + '' },
+                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
+                            react_1.default.createElement(core_1.Box, { p: 2 },
+                                react_1.default.createElement(core_1.AppBar, { position: 'static', color: 'inherit', style: { backgroundColor: 'transparent' } },
+                                    react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: value, onChange: handleChange, variant: "scrollable", scrollButtons: "on" },
+                                        react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, isClientPortal ? 'Documents for Experts' : 'Client Documents') }),
+                                        !isClientPortal && react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, "Paro Documents") })))),
+                            react_1.default.createElement(core_1.Box, { p: 2 },
+                                react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row-reverse", justify: "space-evenly", alignItems: "center", style: { display: 'flex', flexDirection: 'column' } },
+                                    react_1.default.createElement(core_1.Typography, { variant: "body1", style: { color: 'white', marginLeft: '12px' } },
+                                        react_1.default.createElement("b", null, value === 0 ? expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
+                                        " Documents Total"),
+                                    value === 0 && react_1.default.createElement(core_1.Typography, { variant: "body1", style: { color: 'white' } },
+                                        react_1.default.createElement("b", null, value === 0 ? ((expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length) ? (_a = expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.filter((file) => !(file === null || file === void 0 ? void 0 : file.lastViewed))) === null || _a === void 0 ? void 0 : _a.length : 0) : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
+                                        " Documents Unread")))),
+                        react_1.default.createElement(lab_1.TabPanel, { value: '0' },
+                            react_1.default.createElement(ClientDocumentsTable_1.ClientDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expertFiles: expertClientFiles, setExpertClientFiles: setExpertClientFiles, clientAndProjectsList: clientAndProjects, uploadExpertClientFiles: uploadExpertClientFiles, updateFileLastViewed: updateFileLastViewed, deleteExpertClientFile: deleteExpertClientFile, paroDocuments: false, freelancerName: freelancerName !== null && freelancerName !== void 0 ? freelancerName : '', freelancerEmail: freelancerEmail !== null && freelancerEmail !== void 0 ? freelancerEmail : '', getFileLazyQuery: getFileLazyQuery, expertClientFilesLazyQuery: expertClientFilesLazyQuery, isClientPortal: isClientPortal })),
+                        react_1.default.createElement(lab_1.TabPanel, { value: '1' },
+                            react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
+        react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
+                style: {
+                    zIndex: 9999,
+                    backgroundColor: 'transparent'
+                },
+            } })));
+};
+exports.DocumentCenter = DocumentCenter;

package/lib/components/DocumentCenter/DocumentTable.d.ts

@@ -0,0 +1,15 @@
+interface DocumentTableProps {
+    legacyFreelancerId: number;
+    paroProjectsData: any;
+    expiryDate: string;
+    expertFiles: any[];
+    uploadExpertClientFiles: any;
+    uploadFileData: any;
+    deleteFileMutation: any;
+    updateFreelancerExpiryMutation: any;
+    GetFilesDocument: any;
+    foldername: string;
+    paroDocuments: boolean;
+}
+export declare const DocumentTable: ({ legacyFreelancerId, paroProjectsData, expiryDate, expertFiles, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, GetFilesDocument, foldername, paroDocuments }: DocumentTableProps) => JSX.Element;
+export {};