@paro.io/expert-shared-components 1.6.6 → 1.6.8

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.js

@@ -322,6 +322,11 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
             }
         }
     });
+    (0, react_1.useEffect)(() => {
+        if (expertFiles && expertFiles.length > 0) {
+            setFiles(expertFiles);
+        }
+    }, [expertFiles]);
     const toggleDeleteModal = (fileName, fileId) => {
         setDeleteModalOpen(!isDeleteModalOpen);
         if (fileName) {
@@ -332,7 +337,7 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType, paroDocuments: paroDocuments, uploadExpertClientFiles: uploadExpertClientFiles, refetchFiles: refetchFiles, legacyFreelancerId: legacyFreelancerId, freelancerName: freelancerName, freelancerEmail: freelancerEmail, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl }),
         react_1.default.createElement(utils_1.CustomPaper, { style: { height: `${(files === null || files === void 0 ? void 0 : files.length) === 0 ? '30vh' : 'auto'}` } },
-            (files === null || files === void 0 ? void 0 : files.length) > 0 && react_1.default.createElement("div", { className: 'w-1/3' },
+            react_1.default.createElement("div", { className: 'w-1/3' },
                 react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),
             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,

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

@@ -4,6 +4,7 @@ interface DocumentCenterProps {
     setOpenModal: (openModal: boolean) => void;
     expertClientFilesLazyQuery: any;
     getClientAndProjectsLazyQuery?: any;
+    clientFilesData?: any[];
     uploadExpertClientFiles: any;
     uploadFileData?: any;
     deleteFileMutation?: any;
@@ -20,6 +21,7 @@ interface DocumentCenterProps {
     getFreelancerLazyQuery?: any;
     documentUploadUrl?: string;
     downloadDocumentUrl?: string;
+    loading?: boolean;
 }
-export declare const DocumentCenter: ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, }: DocumentCenterProps) => JSX.Element;
+export declare const DocumentCenter: ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, loading, }: DocumentCenterProps) => JSX.Element;
 export {};

package/lib/components/DocumentCenter/DocumentCenter.js

@@ -80,39 +80,33 @@ const CustomDialogContent = (0, core_1.styled)(core_1.DialogContent)(({ theme })
         background: '#707070',
     },
 }));
-const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal = false, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, }) => {
+const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal = false, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, loading = false, }) => {
     var _a;
     const [value, setValue] = (0, react_1.useState)(0);
-    const [expertClientFiles, setExpertClientFiles] = (0, react_1.useState)([]);
+    const [expertClientFiles, setExpertClientFiles] = (0, react_1.useState)(clientFilesData !== null && clientFilesData !== void 0 ? clientFilesData : []);
     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 [expertLoading, setExpertLoading] = (0, react_1.useState)(false);
     const fetchQueries = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         try {
-            setLoading(true);
+            setExpertLoading(true);
             const freelancerIds = Array.isArray(legacyFreelancerId) ? legacyFreelancerId : [legacyFreelancerId];
             let clientFiles = [];
             let clientAndProjects = [];
             let expertFiles = [];
             let expiryDate = [];
-            if (isClientPortal) {
-                const clientFilesResponse = yield expertClientFilesLazyQuery();
-                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 [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 = (_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 : [];
+            clientAndProjects = (_e = (_d = clientAndProjectsResponse === null || clientAndProjectsResponse === void 0 ? void 0 : clientAndProjectsResponse.data) === null || _d === void 0 ? void 0 : _d.getParoProjects) !== null && _e !== void 0 ? _e : [];
+            expertFiles = (_g = (_f = expertFilesResponse === null || expertFilesResponse === void 0 ? void 0 : expertFilesResponse.data) === null || _f === void 0 ? void 0 : _f.getFiles) !== null && _g !== void 0 ? _g : [];
+            expiryDate = (_j = (_h = freelancerData === null || freelancerData === void 0 ? void 0 : freelancerData.data) === null || _h === void 0 ? void 0 : _h.getFreelancer) === null || _j === void 0 ? void 0 : _j.insuranceExpiryDate;
             const filterProjects = clientAndProjects.filter((p) => p.status !== 'Complete');
             setExpertClientFiles(clientFiles);
             setClientAndProjects(isClientPortal ? expertProjectsList : filterProjects);
@@ -123,14 +117,22 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
             console.error("Error fetching queries:", error);
         }
         finally {
-            setLoading(false);
+            setExpertLoading(false);
         }
     });
     (0, react_1.useEffect)(() => {
-        if (openModal) {
+        if (openModal && !isClientPortal) {
             fetchQueries();
         }
     }, [openModal]);
+    (0, react_1.useEffect)(() => {
+        if (clientFilesData && clientFilesData.length > 0) {
+            setExpertClientFiles(clientFilesData !== null && clientFilesData !== void 0 ? clientFilesData : []);
+            setClientAndProjects(expertProjectsList !== null && expertProjectsList !== void 0 ? expertProjectsList : []);
+            setExpertFiles(clientFilesData);
+            loading = false;
+        }
+    }, [clientFilesData]);
     const handleChange = (event, newValue) => {
         if (newValue >= 0) {
             setValue(newValue);
@@ -152,7 +154,7 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
                     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(CustomDialogContent, { style: { width: '100%' } }, loading || expertLoading
                 ?
                     react_1.default.createElement(core_1.CircularProgress, { size: 24 })
                 :

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

@@ -1,15 +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 {};
+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 {};