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

package/lib/components/ClientReferencesSection/DeleteButton.js

@@ -15,26 +15,26 @@ const omitDeleteButtonIconProps = ["isDisabled"];
 const omitDeleteButtonTypographyProps = ["isDisabled"];
 const DeleteButtonTypography = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(Typography_1.default, Object.assign({}, (0, omit_1.default)(props, omitDeleteButtonTypographyProps)));
-}) `
-  padding-right: 17px;
-  color: ${colors_1.default.deleteButtonRed} !important ;
+}) `
+  padding-right: 17px;
+  color: ${colors_1.default.deleteButtonRed} !important ;
   ${({ isDisabled }) => {
     return (isDisabled &&
-        `
-      color: ${colors_1.default.notice} !important;
+        `
+      color: ${colors_1.default.notice} !important;
   `);
-}}
+}}
 `;
 const DeleteButtonIcon = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(Clear_1.default, Object.assign({}, (0, omit_1.default)(props, omitDeleteButtonIconProps)));
-}) `
-  color: ${colors_1.default.deleteButtonRed} !important ;
+}) `
+  color: ${colors_1.default.deleteButtonRed} !important ;
   ${({ isDisabled }) => {
     return (isDisabled &&
-        `
-        color: ${colors_1.default.notice} !important;
+        `
+        color: ${colors_1.default.notice} !important;
     `);
-}}
+}}
 `;
 const DeleteButton = ({ buttonText, onClick, variant = "text", isDisabled, className }) => {
     return (react_1.default.createElement(Buttons_1.StyledEditOrDeleteButton, { onClick: () => {

package/lib/components/ClientReferencesSection/ParoError.js

@@ -9,18 +9,18 @@ const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("./constants/colors"));
 const AlertSnackBarButton_1 = require("./AlertSnackBarButton");
-const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
-  width: 100%;
-  padding-bottom: 100;
+const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
+  width: 100%;
+  padding-bottom: 100;
 `;
-const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
-  color: ${colors_1.default.paroBlack};
-  padding: 0px 0px 18px 0px;
+const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
+  color: ${colors_1.default.paroBlack};
+  padding: 0px 0px 18px 0px;
 `;
-const ParoSubtitle = styled_components_1.default.div `
-  color: ${colors_1.default.paroBlack};
-  margin-bottom: 24px;
-  font-size: 1rem;
+const ParoSubtitle = styled_components_1.default.div `
+  color: ${colors_1.default.paroBlack};
+  margin-bottom: 24px;
+  font-size: 1rem;
 `;
 const ParoError = ({ handleClose }) => {
     const handleCancelLanguage = handleClose ? "Close" : "Retry";

package/lib/components/ClientReferencesSection/TagsSection.js

@@ -9,8 +9,8 @@ const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const NullContentConditionalColor_1 = require("./styles/NullContentConditionalColor");
 const Tags_1 = require("./styles/Tags");
-const ProfileTags = (0, styled_components_1.default)(Tags_1.Tags) `
-  margin: 0 5px 8px 0;
+const ProfileTags = (0, styled_components_1.default)(Tags_1.Tags) `
+  margin: 0 5px 8px 0;
 `;
 const TagsSection = ({ multiLine, tags = [], tagsExpected, }) => {
     if ((tags === null || tags === void 0 ? void 0 : tags.length) < 1) {

package/lib/components/ClientReferencesSection/styles/BrandedTypography.js

@@ -7,6 +7,6 @@ exports.StyledTypography = void 0;
 const Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.StyledTypography = (0, styled_components_1.default)(Typography_1.default) `
-  color: ${colors_1.default.paroDeepblue} !important ;
+exports.StyledTypography = (0, styled_components_1.default)(Typography_1.default) `
+  color: ${colors_1.default.paroDeepblue} !important ;
 `;

package/lib/components/ClientReferencesSection/styles/Buttons.js

@@ -7,21 +7,21 @@ exports.StyledEditOrDeleteButton = exports.HeaderButtonUnderline = exports.Heade
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.HeaderButtons = (0, styled_components_1.default)(core_1.Button) `
-  margin-left: 0px !important;
-  padding-left: 0px !important;
-  span {
-    color: ${colors_1.default.buttonText} !important;
-  }
+exports.HeaderButtons = (0, styled_components_1.default)(core_1.Button) `
+  margin-left: 0px !important;
+  padding-left: 0px !important;
+  span {
+    color: ${colors_1.default.buttonText} !important;
+  }
 `;
-exports.HeaderButtonUnderline = (0, styled_components_1.default)(exports.HeaderButtons) `
-  text-decoration: underline;
+exports.HeaderButtonUnderline = (0, styled_components_1.default)(exports.HeaderButtons) `
+  text-decoration: underline;
 `;
-exports.StyledEditOrDeleteButton = (0, styled_components_1.default)(core_1.Button) `
-  margin: 10px 0px !important;
-  background-color: ${colors_1.default.primary};
-  color: ${colors_1.default.white};
-  :hover {
-    color: ${colors_1.default.primary} !important;
-  }
+exports.StyledEditOrDeleteButton = (0, styled_components_1.default)(core_1.Button) `
+  margin: 10px 0px !important;
+  background-color: ${colors_1.default.primary};
+  color: ${colors_1.default.white};
+  :hover {
+    color: ${colors_1.default.primary} !important;
+  }
 `;

package/lib/components/ClientReferencesSection/styles/Name.js

@@ -11,12 +11,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.Name = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement(core_1.Typography, Object.assign({}, (0, omit_1.default)(props, ["isNull"])));
-}) `
-  font-family: Roboto-Bold;
+}) `
+  font-family: Roboto-Bold;
   ${({ isNull }) => {
     return (isNull &&
-        `
-        color: ${colors_1.default.paroRed} !important;
+        `
+        color: ${colors_1.default.paroRed} !important;
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/NullContentConditionalColor.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NullContentConditionalColor = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
-exports.NullContentConditionalColor = styled_components_1.default.span `
+exports.NullContentConditionalColor = styled_components_1.default.span `
   ${(props) => {
     return (props.isNull &&
-        `
-        color: ${colors_1.default.paroRed} !important
+        `
+        color: ${colors_1.default.paroRed} !important
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/SectionBody.js

@@ -10,18 +10,18 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.SectionBody = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement("div", Object.assign({}, (0, omit_1.default)(props, ["atLeastOneValueIsNull"])));
-}) `
-  background-color: ${colors_1.default.white};
-  border-radius: 2px;
-  border: 1px Solid ${colors_1.default.lightGray};
-  color: ${colors_1.default.paroBlack};
-  font-family: Roboto;
-  padding: 32.5px 42.5px 32.5px 42.5px;
-  width: 100%;
+}) `
+  background-color: ${colors_1.default.white};
+  border-radius: 2px;
+  border: 1px Solid ${colors_1.default.lightGray};
+  color: ${colors_1.default.paroBlack};
+  font-family: Roboto;
+  padding: 32.5px 42.5px 32.5px 42.5px;
+  width: 100%;
   ${({ atLeastOneValueIsNull }) => {
     return (atLeastOneValueIsNull &&
-        `
-        border-color: ${colors_1.default.paroRed} !important;
+        `
+        border-color: ${colors_1.default.paroRed} !important;
     `);
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/SectionTitle.js

@@ -10,12 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = __importDefault(require("../constants/colors"));
 exports.SectionTitle = (0, styled_components_1.default)((props) => {
     return react_1.default.createElement("div", Object.assign({}, (0, omit_1.default)(props, ["noBottomPadding"])));
-}) `
-  font-family: Roboto-Bold;
-  font-size: 20px;
-  color: ${colors_1.default.paroBlack};
-  padding: 23px 0px 15.5px 0px;
+}) `
+  font-family: Roboto-Bold;
+  font-size: 20px;
+  color: ${colors_1.default.paroBlack};
+  padding: 23px 0px 15.5px 0px;
   ${({ noBottomPadding }) => {
     return noBottomPadding && "padding-bottom: 0 !important;";
-}}
+}}
 `;

package/lib/components/ClientReferencesSection/styles/Tags.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tags = void 0;
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Tags = (0, styled_components_1.default)(core_1.Chip) `
-  font-family: Roboto-Bold;
+exports.Tags = (0, styled_components_1.default)(core_1.Chip) `
+  font-family: Roboto-Bold;
 `;

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;