@paro.io/expert-shared-components 1.7.6 → 1.7.8

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

@@ -16,9 +16,6 @@ interface DocumentUploadProps {
     error?: string | null;
     clientAndProjectsList?: any[];
     uploadExpertClientFiles?: any;
-    uploadInternalFile?: any;
-    foldername?: string;
-    insuranceExpiryDate?: any;
     refetchFiles?: any;
     legacyFreelancerId?: any;
     freelancerName?: string;
@@ -26,5 +23,5 @@ interface DocumentUploadProps {
     isClientPortal?: boolean;
     documentUploadUrl?: string;
 }
-export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, insuranceExpiryDate, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal, documentUploadUrl, }: DocumentUploadProps) => JSX.Element;
+export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal, documentUploadUrl, }: DocumentUploadProps) => JSX.Element;
 export {};

package/lib/components/DocumentCenter/DocumentUploadRow.js

@@ -78,7 +78,7 @@ const generateOptions = (array, clientOptions, isClientPortal) => {
         }
     });
 };
-const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, insuranceExpiryDate, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, }) => {
+const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, }) => {
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     const [documentName, setDocumentName] = (0, react_1.useState)('');
     const fileInputRef = (0, react_1.useRef)(null);
@@ -93,69 +93,40 @@ const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, set
     const disableButton = !(documentName && checkField) && !isUploading;
     const uploadFile = (fileForUpload, fileExtension, isLargeFile, selectedFile) => {
         var _a, _b, _c, _d, _e;
-        paroDocuments ?
-            uploadInternalFile({
-                variables: {
-                    input: {
-                        foldername,
-                        subfolder: docType,
-                        filename: `${documentName}.${fileExtension}`,
-                        data: fileForUpload,
-                        expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
-                        valid: true,
-                        sourceOfEOInsurance: 'Dashboard',
-                    },
-                }
-            }).then((res) => {
-                var _a;
-                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadFileData) {
-                    refetchFiles();
-                    (0, utils_1.showToast)('success', 'File Uploaded successfully!');
-                }
-                else {
-                    (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-                }
-            })
-                .catch((err) => {
-                (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-            }).finally(() => {
-                setIsUploading(false);
-                setDocumentName('');
-            })
-            : uploadExpertClientFiles({
-                variables: {
-                    input: {
-                        clientId: (_a = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _a === void 0 ? void 0 : _a.id,
-                        clientName: (_b = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _b === void 0 ? void 0 : _b.name,
-                        email: isClientPortal ? (_c = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _c === void 0 ? void 0 : _c.name : freelancerEmail,
-                        fileName: `${documentName}.${fileExtension}`,
-                        fileSize: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size,
-                        fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[docType],
-                        freelancerId: isClientPortal ? (_d = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _d === void 0 ? void 0 : _d.id : legacyFreelancerId,
-                        freelancerName: isClientPortal ? (_e = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _e === void 0 ? void 0 : _e.name : freelancerName,
-                        projectId: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.id,
-                        projectName: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.name,
-                        uploadedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
-                        data: isLargeFile ? "" : fileForUpload,
-                    },
-                }
-            })
-                .then((res) => {
-                var _a;
-                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadExpertClientFilesData) {
-                    refetchFiles();
-                    (0, utils_1.showToast)('success', 'File Uploaded successfully!');
-                }
-                else {
-                    (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-                }
-            })
-                .catch((err) => {
+        uploadExpertClientFiles({
+            variables: {
+                input: {
+                    clientId: (_a = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _a === void 0 ? void 0 : _a.id,
+                    clientName: (_b = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _b === void 0 ? void 0 : _b.name,
+                    email: isClientPortal ? (_c = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _c === void 0 ? void 0 : _c.name : freelancerEmail,
+                    fileName: `${documentName}.${fileExtension}`,
+                    fileSize: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size,
+                    fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[docType],
+                    freelancerId: isClientPortal ? (_d = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _d === void 0 ? void 0 : _d.id : legacyFreelancerId,
+                    freelancerName: isClientPortal ? (_e = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _e === void 0 ? void 0 : _e.name : freelancerName,
+                    projectId: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.id,
+                    projectName: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.name,
+                    uploadedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
+                    data: isLargeFile ? "" : fileForUpload,
+                },
+            }
+        })
+            .then((res) => {
+            var _a;
+            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadExpertClientFilesData) {
+                refetchFiles();
+                (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+            }
+            else {
                 (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-            }).finally(() => {
-                setIsUploading(false);
-                setDocumentName('');
-            });
+            }
+        })
+            .catch((err) => {
+            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+        }).finally(() => {
+            setIsUploading(false);
+            setDocumentName('');
+        });
     };
     const uploadFileRouter = (fileForUpload, fileExtension, selectedFile) => {
         setIsUploading(true);

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

@@ -4,7 +4,6 @@ interface DocumentTableProps {
     setExpiryDate: (expiryDate: string) => void;
     expertFiles: any[];
     setExpertFiles: (expertFiles: any[]) => void;
-    uploadExpertClientFiles: any;
     uploadFileData: any;
     deleteFileMutation: any;
     updateFreelancerExpiryMutation: any;

package/lib/components/DocumentCenter/ParoDocumentsTable.js

@@ -263,6 +263,49 @@ const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, exp
             setApiFoldername((_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/'));
         }
     };
+    const uploadFile = (fileForUpload, fileExtension) => {
+        setIsUploading(true);
+        uploadFileData({
+            variables: {
+                input: {
+                    foldername,
+                    subfolder: docType,
+                    filename: `${documentName}.${fileExtension}`,
+                    data: fileForUpload,
+                    expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
+                    valid: true,
+                    sourceOfEOInsurance: 'Dashboard',
+                },
+            },
+            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                refetchFiles(true);
+            })
+        })
+            .then(() => {
+            (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+        })
+            .catch((err) => {
+            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+        });
+        setIsUploading(false);
+        setApiFoldername('');
+        setDocumentName('');
+    };
+    const handleUpload = (event) => {
+        const selectedFile = event.target.files && event.target.files[0];
+        if (!(0, utils_1.validateFileUpload)(selectedFile, false)) {
+            return;
+        }
+        if (selectedFile) {
+            const fileExtension = selectedFile.name.substring(selectedFile.name.lastIndexOf('.') + 1);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const fileForUpload = String(reader.result).split(';base64,')[1];
+                uploadFile(fileForUpload, fileExtension);
+            };
+            reader.readAsDataURL(selectedFile);
+        }
+    };
     const handleDateChange = (date) => {
         if (date) {
             const currentDate = (0, date_fns_1.startOfDay)(new Date);
@@ -276,7 +319,7 @@ const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, exp
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, uploadInternalFile: uploadFileData, docType: docType, foldername: foldername, insuranceExpiryDate: insuranceExpiryDate, refetchFiles: refetchFiles, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
         react_1.default.createElement(utils_1.CustomPaper, null,
             react_1.default.createElement("div", { className: 'w-1/4' },
                 react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),

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

@@ -1,6 +1,6 @@
-interface UploadFilesButtonProps {
-    onFileSelect: (file: File) => void;
-    isLoading?: boolean;
-}
-export declare const UploadFilesButton: ({ onFileSelect, isLoading, }: UploadFilesButtonProps) => JSX.Element;
-export {};
+interface UploadFilesButtonProps {
+    onFileSelect: (file: File) => void;
+    isLoading?: boolean;
+}
+export declare const UploadFilesButton: ({ onFileSelect, isLoading, }: UploadFilesButtonProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/UploadFilesButton.js

@@ -1,29 +1,29 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadFilesButton = void 0;
-const react_1 = __importDefault(require("react"));
-const base_ui_1 = require("@paro.io/base-ui");
-const react_2 = require("react");
-const UploadFilesButton = ({ onFileSelect, isLoading, }) => {
-    const fileInputRef = (0, react_2.useRef)(null);
-    const handleClick = () => {
-        var _a;
-        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    const handleFileChange = (event) => {
-        var _a;
-        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onFileSelect(file);
-        }
-        // Reset input value to allow uploading the same file again
-        event.target.value = '';
-    };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, className: "hidden", accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" }),
-        react_1.default.createElement(base_ui_1.Button, { onClick: handleClick, disabled: isLoading })));
-};
-exports.UploadFilesButton = UploadFilesButton;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadFilesButton = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const react_2 = require("react");
+const UploadFilesButton = ({ onFileSelect, isLoading, }) => {
+    const fileInputRef = (0, react_2.useRef)(null);
+    const handleClick = () => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const handleFileChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            onFileSelect(file);
+        }
+        // Reset input value to allow uploading the same file again
+        event.target.value = '';
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, className: "hidden", accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" }),
+        react_1.default.createElement(base_ui_1.Button, { onClick: handleClick, disabled: isLoading })));
+};
+exports.UploadFilesButton = UploadFilesButton;

package/lib/components/ExpertProfileHeader/ActionButtonSection.js

@@ -11,12 +11,12 @@ const CopyToClipboardAlert_1 = __importDefault(require("../shared/CopyToClipboar
 const colors_1 = __importDefault(require("../ClientReferencesSection/constants/colors"));
 const Banner_1 = __importDefault(require("./Banner"));
 const base_icons_1 = require("@paro.io/base-icons");
-const StyledButton = (0, styled_components_1.default)(core_1.Button) `
-    margin: 0px !important;
-    padding: 26px 0 18px 0 !important;
-    span {
-        color: ${colors_1.default.buttonText} !important
-     }
+const StyledButton = (0, styled_components_1.default)(core_1.Button) `
+    margin: 0px !important;
+    padding: 26px 0 18px 0 !important;
+    span {
+        color: ${colors_1.default.buttonText} !important
+     }
 `;
 const ActionButton = ({ title, ariaLabel, onClick, icon: Icon }) => (react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: title },
     react_1.default.createElement(core_1.IconButton, { "aria-label": ariaLabel, onClick: onClick },

package/lib/components/ExpertProfileHeader/EarningsSection.js

@@ -129,18 +129,16 @@ const EarningsSection = ({ expertServiceLinesPlus, firmTags, haveATeamProp, expe
             react_1.default.createElement(core_1.Box, { mb: 1 },
                 react_1.default.createElement("b", null, "Expert Earnings :")),
             hasCompletedProjects ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(EarningsInfo, { label: "Monthly Goal", value: currentMonthGoalHours > 0 ? ToLocalStringFn(currentMonthGoalHours) : 'N/A' }),
+                react_1.default.createElement(EarningsInfo, { label: "Monthly Goal", value: currentMonthGoalHours > 0 ? `$ ${ToLocalStringFn(currentMonthGoalHours)}` : 'N/A' }),
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
-                react_1.default.createElement(EarningsInfo, { label: "Monthly Earnings", value: (earnings === null || earnings === void 0 ? void 0 : earnings.length) > 0 ? ToLocalStringFn(earning) : 'N/A' }),
+                react_1.default.createElement(EarningsInfo, { label: "Monthly Earnings", value: (earnings === null || earnings === void 0 ? void 0 : earnings.length) > 0 ? `$ ${ToLocalStringFn(earning)}` : 'N/A' }),
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(EarningsInfo, { label: "% to Goal", value: currentMonthGoalHours && earning ? `${ToLocalStringFn(((earning / currentMonthGoalHours) * 100).toFixed(2))} %` : 'N/A' }),
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(EarningsInfo, { label: "Lifetime FSV", value: lifetimeFSV ? ToLocalStringFn(lifetimeFSV) : 'N/A', textColor: backgroundColor }),
-                react_1.default.createElement(core_1.Box, { mb: 2 },
-                    react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(core_1.Box, { mb: 2 },
                     react_1.default.createElement(core_1.Divider, null)),
                 react_1.default.createElement(ExpertStatsTable, { expertIRPRRatioPrev: expertIRPRRatioPrev, expertIRPRRatio: expertIRPRRatio, winRatePrev: winRatePrev, winRate: winRate, lifetimeIRPR: lifetimeIRPR, lifetimeWinRate: lifetimeWinRate }))) : (react_1.default.createElement(core_1.Typography, { variant: "body1" }, "This Expert has not billed yet")))));

package/lib/components/ExpertProfileHeader/ExpertProfileHeader.d.ts

@@ -6,6 +6,7 @@ type PersonalInformationType = {
     user: any;
 };
 type SectionContents = {
+    legacyFreelancerId: string;
     expertId: string;
     whiteLabelReserved: boolean;
     firmTags: string[];
@@ -15,7 +16,8 @@ type SectionContents = {
     isExpertOps?: boolean;
     internalUserId?: number;
     openServiceLinesTemplate?: boolean;
-    setOpenServiceLinesTemplate: (openServiceLinesTemplate: boolean) => void;
+    setOpenServiceLinesTemplate?: any;
+    vanityTitle: string;
 };
 type QueryAndMutationProps = {
     getExpertByLegacyFreelancerIdDocument?: any;
@@ -59,6 +61,9 @@ type QueryAndMutationProps = {
     uploadUserPhotoMutation?: any;
     loadingNewImage?: boolean;
     imageUpdateError?: any;
+    getExpertVanityTitles?: any;
+    getExpertRates?: any;
+    updateExpert?: any;
 };
 type ChangeEmailPasswordProps = {
     getUserByEmail?: any;
@@ -73,5 +78,5 @@ type ProfileCompletedPercentageProps = {
     detailsSectionCompleted: boolean;
     handleScrollToBottom?: () => void;
 };
-export declare const ExpertProfileHeader: ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
+export declare const ExpertProfileHeader: ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
 export {};

package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js

@@ -51,6 +51,7 @@ const EarningsSection_1 = __importDefault(require("./EarningsSection"));
 const NetworkSection_1 = __importDefault(require("./NetworkSection"));
 const ProfileSection_1 = __importDefault(require("./ProfileSection"));
 const TeamsSection_1 = __importDefault(require("./TeamsSection"));
+const react_hot_toast_1 = require("react-hot-toast");
 const CustomPaper = (0, core_1.styled)(core_1.Paper)({
     overflow: 'auto',
     scrollbarWidth: 'auto', // For Firefox
@@ -75,7 +76,7 @@ const convertRegionToStateAbbreviation = (region) => {
 const personalInformationReducer = (state, updatedState) => {
     return Object.assign(Object.assign({}, state), updatedState);
 };
-const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, }) => {
+const ExpertProfileHeader = ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const [leftSideStatus, setLeftSideStatus] = react_1.default.useState("");
     const [rightSideStatus, setRightSideStatus] = react_1.default.useState("");
@@ -136,8 +137,8 @@ const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName
     const currentMonthAvailabilityHours = (_g = availabilityData === null || availabilityData === void 0 ? void 0 : availabilityData.getFreelancerAvailability) !== null && _g !== void 0 ? _g : {};
     const nextMonthAvailabilityHours = (_h = nextMonthAvailabilityData === null || nextMonthAvailabilityData === void 0 ? void 0 : nextMonthAvailabilityData.getFreelancerAvailability) !== null && _h !== void 0 ? _h : {};
     const currentMonthGoalHours = ((_j = currentMonthAvailabilityHours.monthlyHoursAvailable) !== null && _j !== void 0 ? _j : currentMonthAvailabilityHours.monthlyHoursAvailable === 0) ? (currentMonthAvailabilityHours.monthlyHoursAvailable).toFixed(2) : '';
-    const estimatedAvailability = (currentMonthAvailabilityHours.estimatedAvailability || currentMonthAvailabilityHours.estimatedAvailability === 0) ? +((currentMonthAvailabilityHours.estimatedAvailability).toFixed(2)) : '-';
-    const nextMonthTrueAvailability = (nextMonthAvailabilityHours.estimatedAvailability || nextMonthAvailabilityHours.estimatedAvailability === 0) ? +((nextMonthAvailabilityHours.estimatedAvailability).toFixed(2)) : '-';
+    const estimatedAvailability = (currentMonthAvailabilityHours.estimatedAvailability || currentMonthAvailabilityHours.estimatedAvailability === 0) ? +((currentMonthAvailabilityHours.estimatedAvailability).toFixed(2)) : 0;
+    const nextMonthTrueAvailability = (nextMonthAvailabilityHours.estimatedAvailability || nextMonthAvailabilityHours.estimatedAvailability === 0) ? +((nextMonthAvailabilityHours.estimatedAvailability).toFixed(2)) : 0;
     const expertServiceLinesPlus = (serviceLineData === null || serviceLineData === void 0 ? void 0 : serviceLineData.getExpertByLegacyFreelancerId.serviceLinesPlus) || [];
     const expertLevels = expertLevelsData === null || expertLevelsData === void 0 ? void 0 : expertLevelsData.getExpertLevelsData;
     if ((expertStatuses && expertMetricsData && leftSideStatus === "" && rightSideStatus === "") || triggerNewStatus) {
@@ -215,22 +216,28 @@ const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName
                 react_1.default.createElement(core_1.Divider, null),
                 react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { display: 'flex', flexWrap: isSmallScreen ? 'wrap' : 'nowrap' } },
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
-                        react_1.default.createElement(ProfileSection_1.default, { legacyFreelancerId: Number(expertId), imageUrl: imageUrl, shouldAllowEditProfile: isExpertOps !== null && isExpertOps !== void 0 ? isExpertOps : false, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, editServiceLine: editServiceLine, city: city, stateAbbreviation: stateAbbreviation, email: email, phone: phone, paroTenure: paroTenure, hourlyRate: defaultHourlyRate, setOpen: setOpen, paroProjectsData: paroProjectsData, getUserDocument: getUserDocument, uploadUserPhotoMutation: uploadUserPhotoMutation, loadingNewImage: loadingNewImage, imageUpdateError: imageUpdateError, isInternal: isInternal, getUserByEmail: getUserByEmail, updateUserEmail: updateUserEmail, updateUserMutation: updateUserMutation, getUserByEmailLazyQuery: getUserByEmailLazyQuery, updateUserPassword: updateUserPassword, verifyUserPassword: verifyUserPassword }),
+                        react_1.default.createElement(ProfileSection_1.default, { legacyFreelancerId: Number(legacyFreelancerId), imageUrl: imageUrl, shouldAllowEditProfile: isExpertOps !== null && isExpertOps !== void 0 ? isExpertOps : false, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, editServiceLine: editServiceLine, city: city, stateAbbreviation: stateAbbreviation, email: email, phone: phone, setOpen: setOpen, paroProjectsData: paroProjectsData, getUserDocument: getUserDocument, uploadUserPhotoMutation: uploadUserPhotoMutation, loadingNewImage: loadingNewImage, imageUpdateError: imageUpdateError, isInternal: isInternal, getUserByEmail: getUserByEmail, updateUserEmail: updateUserEmail, updateUserMutation: updateUserMutation, getUserByEmailLazyQuery: getUserByEmailLazyQuery, updateUserPassword: updateUserPassword, verifyUserPassword: verifyUserPassword, getExpertRates: getExpertRates }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical', style: { marginLeft: '0px !important' } })),
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
-                        react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal }),
+                        react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal, paroTenure: paroTenure, getExpertVanityTitles: getExpertVanityTitles, updateExpert: updateExpert, expertId: expertId, legacyFreelancerId: Number(legacyFreelancerId), vanityTitle: vanityTitle, getExpertByLegacyFreelancerIdDocument: getExpertByLegacyFreelancerIdDocument }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' })),
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
                         react_1.default.createElement(EarningsSection_1.default, { expertServiceLinesPlus: expertServiceLinesPlus, firmTags: firmTags, haveATeamProp: haveATeamProp, expertLevels: expertLevels, currentMonthGoalHours: currentMonthGoalHours, expertIRPRRatio: expertIRPRRatio, winRate: winRate, expertIRPRRatioPrev: expertIRPRRatioPrev, winRatePrev: winRatePrev, earnings: earnings, upsell: upsell, crossSell: crossSell, lifetimeIRPR: lifetimeIRPR, lifetimeWinRate: lifetimeWinRate, hasCompletedProjects: (_k = expertMetricsData === null || expertMetricsData === void 0 ? void 0 : expertMetricsData.getExpertMetrics) === null || _k === void 0 ? void 0 : _k.lastProjectCompleted, lifetimeFSV: lifetimeFSV }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' })),
-                    (estimatedAvailability !== '-' || nextMonthTrueAvailability !== '-' || expertFirms) && (react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
+                    (estimatedAvailability !== 0 || nextMonthTrueAvailability !== 0 || expertFirms) && (react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
                         react_1.default.createElement(TeamsSection_1.default, { estimatedAvailability: estimatedAvailability, nextMonthTrueAvailability: nextMonthTrueAvailability, expertFirms: expertFirms, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, city: city, stateAbbreviation: stateAbbreviation, paroTenure: paroTenure, imageUrl: imageUrl }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' }))),
                     react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: true, style: { flex: '1', width: 'auto' } },
                         react_1.default.createElement(ActivitySection_1.default, { expertMetricsData: expertMetricsData, expertStatuses: expertStatuses, projectTags: (_l = projectChangeLogData === null || projectChangeLogData === void 0 ? void 0 : projectChangeLogData.getProjectChangelog[0]) !== null && _l !== void 0 ? _l : [], projectName: projectName, clientName: clientName })))),
             isExpertOps && address && legacyMetadata &&
-                react_1.default.createElement(EditPersonalInformation_1.default, { expertId: expertId, user: user, address: address || {}, legacyMetadata: legacyMetadata, email: email, companyName: companyName, open: open, handleClose: handleClose, updateAddressMutation: updateAddressMutation, addressUpdateLoading: addressUpdateLoading, updateUserMutation: updateUserMutation, userUpdateLoading: userUpdateLoading, updateUserError: updateUserError, updateFreelancerMutation: updateFreelancerMutation, updateFreelancerLoading: updateFreelancerLoading, updateFreelancerError: updateFreelancerError, getExpertStatusDocument: getExpertStatusDocument, isInternal: isInternal, setTriggerNewStatus: setTriggerNewStatus }),
+                react_1.default.createElement(EditPersonalInformation_1.default, { expertId: legacyFreelancerId, user: user, address: address || {}, legacyMetadata: legacyMetadata, email: email, companyName: companyName, open: open, handleClose: handleClose, updateAddressMutation: updateAddressMutation, addressUpdateLoading: addressUpdateLoading, updateUserMutation: updateUserMutation, userUpdateLoading: userUpdateLoading, updateUserError: updateUserError, updateFreelancerMutation: updateFreelancerMutation, updateFreelancerLoading: updateFreelancerLoading, updateFreelancerError: updateFreelancerError, getExpertStatusDocument: getExpertStatusDocument, isInternal: isInternal, setTriggerNewStatus: setTriggerNewStatus }),
             openAssessmentModal && internalUserId &&
-                react_1.default.createElement(SendAssessmentModal_1.default, { user: user, authUserID: internalUserId, openModal: openAssessmentModal, setOpenModal: setOpenAssessmentModal, expertLevelsTrainings: expertLevelsTrainings, trainingsDataLoading: trainingsDataLoading, assignLetterTrainingToExpert: assignLetterTrainingToExpert, assignTrainingLoading: assignTrainingLoading, assignTrainingError: assignTrainingError }))));
+                react_1.default.createElement(SendAssessmentModal_1.default, { user: user, authUserID: internalUserId, openModal: openAssessmentModal, setOpenModal: setOpenAssessmentModal, expertLevelsTrainings: expertLevelsTrainings, trainingsDataLoading: trainingsDataLoading, assignLetterTrainingToExpert: assignLetterTrainingToExpert, assignTrainingLoading: assignTrainingLoading, assignTrainingError: assignTrainingError })),
+        react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
+                style: {
+                    zIndex: 9999,
+                    backgroundColor: 'transparent'
+                },
+            } })));
 };
 exports.ExpertProfileHeader = ExpertProfileHeader;

package/lib/components/ExpertProfileHeader/NetworkSection.d.ts

@@ -7,6 +7,13 @@ interface NetworkSectionProps {
     leftSideStatus: string;
     rightSideStatus: string;
     isInternal: boolean;
+    paroTenure: string;
+    getExpertVanityTitles: any;
+    updateExpert: any;
+    legacyFreelancerId: number;
+    expertId: string;
+    vanityTitle: string;
+    getExpertByLegacyFreelancerIdDocument: any;
 }
-declare const NetworkSection: ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal }: NetworkSectionProps) => JSX.Element;
+declare const NetworkSection: ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }: NetworkSectionProps) => JSX.Element;
 export default NetworkSection;

package/lib/components/ExpertProfileHeader/NetworkSection.js

@@ -1,12 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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());
+    });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const core_1 = require("@material-ui/core");
 const styles_1 = require("@material-ui/core/styles");
 const ProfileCompletedPercentange_1 = require("../ProfileCompletedPercentange");
+const icons_1 = require("@material-ui/icons");
+const ReviewsTab_1 = require("../ReviewsTab/ReviewsTab");
+const base_ui_1 = require("@paro.io/base-ui");
 const useStyles = (0, styles_1.makeStyles)((theme) => ({
     textSuccess: {
         color: '#12756F',
@@ -24,7 +56,59 @@ const StatusItem = ({ label, status, successText, warningText }) => {
         react_1.default.createElement(core_1.Typography, { variant: "body2" }, label),
         react_1.default.createElement("b", { className: status ? classes.textSuccess : classes.textWarning }, status ? successText : warningText)));
 };
-const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal }) => {
+const ExpertiseTitleModal = ({ openModal, updateTitle, titleOptions, selectedTitle, customTitle, setCustomTitle, handleChangeTitle, handleOnClose, handleUpdateExpertTitle }) => {
+    var _a;
+    return (react_1.default.createElement(base_ui_1.Modal, { open: openModal, size: "sm", onClose: handleOnClose },
+        react_1.default.createElement(core_1.Grid, { xs: 12, container: true, direction: "column", justifyContent: "center", alignItems: "center" },
+            react_1.default.createElement(core_1.Box, null,
+                react_1.default.createElement(core_1.Typography, { variant: "h5", style: { fontWeight: 500 } }, "Select Expertise Title")),
+            react_1.default.createElement(core_1.Grid, { item: true, style: { marginBottom: 12, width: '90%' } },
+                react_1.default.createElement(core_1.Select, { required: true, autoWidth: false, variant: "outlined", fullWidth: true, defaultValue: titleOptions, onChange: (event) => handleChangeTitle(event), value: selectedTitle !== null && selectedTitle !== void 0 ? selectedTitle : (_a = titleOptions[0]) === null || _a === void 0 ? void 0 : _a.title },
+                    titleOptions.length > 1 && (react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                        react_1.default.createElement("em", null, "Select title"))),
+                    titleOptions.map((option) => (react_1.default.createElement(core_1.MenuItem, { key: option.id, value: option.title }, option.title))),
+                    react_1.default.createElement(core_1.MenuItem, { value: "Other" },
+                        react_1.default.createElement("em", null, "Other")))),
+            selectedTitle === 'Other' && react_1.default.createElement(core_1.Grid, { item: true, style: { width: '90%' } },
+                react_1.default.createElement(core_1.TextField, { size: "small", variant: "outlined", value: customTitle, fullWidth: true, onChange: (e) => { setCustomTitle(e.target.value); }, placeholder: "Enter custom title" })),
+            react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justifyContent: "space-evenly", style: { marginTop: 12 }, spacing: 1 },
+                react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateExpertTitle, type: "button", isLoading: updateTitle, disabled: selectedTitle === null || (selectedTitle === 'Other' && (customTitle === null || customTitle === '')), color: "primary" }),
+                react_1.default.createElement(base_ui_1.Button, { label: "CANCEL", onClick: handleOnClose, type: "button", disabled: updateTitle, isLoading: updateTitle })))));
+};
+const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }) => {
+    const [openModal, setOpenModal] = (0, react_1.useState)(false);
+    const [selectedTitle, setSelectedTitle] = (0, react_1.useState)(vanityTitle);
+    const [customTitle, setCustomTitle] = (0, react_1.useState)(null);
+    const [updateTitle, setUpdateTitle] = (0, react_1.useState)(false);
+    const handleUpdateExpertTitle = () => __awaiter(void 0, void 0, void 0, function* () {
+        setUpdateTitle(true);
+        updateExpert({
+            variables: {
+                expertId: expertId,
+                input: {
+                    vanityTitle: selectedTitle === 'Other' ? customTitle : selectedTitle
+                }
+            },
+            refetchQueries: [{ query: getExpertByLegacyFreelancerIdDocument, variables: { legacyFreelancerId } }]
+        }).then(() => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'success',
+                message: 'Expertise title Updated successfully!',
+                icon: 'success',
+            });
+        }).catch(() => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'warning',
+                message: 'Failed to update expertise title.',
+                icon: 'warning'
+            });
+        }).finally(() => {
+            setUpdateTitle(false);
+            setOpenModal(false);
+        });
+    });
     return (react_1.default.createElement(core_1.Grid, { item: true, style: { width: '100%', padding: '6px 0px 6px 0px', zIndex: 1 } },
         react_1.default.createElement(core_1.Grid, { style: { paddingLeft: '10px' } },
             react_1.default.createElement("b", null, "Profile"),
@@ -32,6 +116,19 @@ const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, d
                 react_1.default.createElement(ProfileCompletedPercentange_1.ProfileCompletedPercentage, { preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted }))),
         react_1.default.createElement(core_1.Box, { mt: 4, mb: 2, mr: 2 },
             react_1.default.createElement(core_1.Divider, null)),
+        react_1.default.createElement(core_1.Box, { ml: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
+            react_1.default.createElement(core_1.Typography, { variant: "body2" }, "Paro Tenure"),
+            react_1.default.createElement("b", null, paroTenure && paroTenure.length > 0 ? paroTenure : "N/A")),
+        react_1.default.createElement(core_1.Box, { mt: 1, mb: 1, mr: 2 },
+            react_1.default.createElement(core_1.Divider, null)),
+        vanityTitle && react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Box, { ml: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
+                react_1.default.createElement(core_1.Typography, { variant: "body2" }, "Expertise as a "),
+                react_1.default.createElement("b", null, vanityTitle),
+                !isInternal && react_1.default.createElement(core_1.IconButton, { onClick: () => { setOpenModal(true); } },
+                    react_1.default.createElement(icons_1.Cached, null))),
+            react_1.default.createElement(core_1.Box, { mt: 1, mb: 1, mr: 2 },
+                react_1.default.createElement(core_1.Divider, null))),
         react_1.default.createElement(core_1.Grid, { style: { marginRight: '8px', marginLeft: '2px' } },
             react_1.default.createElement(core_1.Box, { mb: 1 },
                 react_1.default.createElement("b", null, "Network Availability :")),
@@ -52,6 +149,8 @@ const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, d
                 react_1.default.createElement("b", null, "Reason: "),
                 react_1.default.createElement("ul", null,
                     react_1.default.createElement("li", null, leftSideStatus),
-                    react_1.default.createElement("li", null, rightSideStatus))))));
+                    react_1.default.createElement("li", null, rightSideStatus)))),
+        openModal &&
+            react_1.default.createElement(ExpertiseTitleModal, { openModal: openModal, updateTitle: updateTitle, titleOptions: [...getExpertVanityTitles], selectedTitle: selectedTitle, customTitle: customTitle, setCustomTitle: setCustomTitle, handleChangeTitle: (event) => { setSelectedTitle(event.target.value); }, handleOnClose: () => setOpenModal(false), handleUpdateExpertTitle: handleUpdateExpertTitle })));
 };
 exports.default = NetworkSection;

package/lib/components/ExpertProfileHeader/ProfileSection.d.ts

@@ -13,8 +13,6 @@ interface ProfileSectionProps {
     stateAbbreviation: string;
     email: string;
     phone: any;
-    paroTenure: string;
-    hourlyRate: number;
     setOpen: (open: boolean) => void;
     paroProjectsData: any;
     getUserDocument?: any;
@@ -28,6 +26,7 @@ interface ProfileSectionProps {
     getUserByEmailLazyQuery?: any;
     updateUserPassword?: any;
     verifyUserPassword?: any;
+    getExpertRates?: any;
 }
-declare const ProfileSection: ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile, firstName, lastName, primaryServiceLine, editServiceLine, city, stateAbbreviation, email, phone, paroTenure, hourlyRate, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, }: ProfileSectionProps) => JSX.Element;
+declare const ProfileSection: ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile, firstName, lastName, primaryServiceLine, editServiceLine, city, stateAbbreviation, email, phone, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, getExpertRates, }: ProfileSectionProps) => JSX.Element;
 export default ProfileSection;