@paro.io/expert-shared-components 1.7.3 → 1.7.5

package/lib/components/DocumentCenter/DocumentCenter.js

@@ -177,7 +177,7 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
                         react_1.default.createElement(lab_1.TabPanel, { value: '0', style: { paddingTop: '0px' } },
                             react_1.default.createElement(ClientDocumentsTable_1.ClientDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expertFiles: expertClientFiles, setExpertClientFiles: setExpertClientFiles, clientAndProjectsList: clientAndProjects, uploadExpertClientFiles: uploadExpertClientFiles, updateFileLastViewed: updateFileLastViewed, deleteExpertClientFile: deleteExpertClientFile, paroDocuments: false, freelancerName: freelancerName !== null && freelancerName !== void 0 ? freelancerName : '', freelancerEmail: freelancerEmail !== null && freelancerEmail !== void 0 ? freelancerEmail : '', getFileLazyQuery: getFileLazyQuery, expertClientFilesLazyQuery: expertClientFilesLazyQuery, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl })),
                         react_1.default.createElement(lab_1.TabPanel, { value: '1' },
-                            react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
+                            react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadExpertClientFiles: uploadExpertClientFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
         react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
                 style: {
                     zIndex: 9999,

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

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

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, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, }) => {
+const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, insuranceExpiryDate, 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,40 +93,69 @@ const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, set
     const disableButton = !(documentName && checkField) && !isUploading;
     const uploadFile = (fileForUpload, fileExtension, isLargeFile, selectedFile) => {
         var _a, _b, _c, _d, _e;
-        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 {
+        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.');
-            }
-        })
-            .catch((err) => {
-            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-        }).finally(() => {
-            setIsUploading(false);
-            setDocumentName('');
-        });
+            }).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) => {
+                (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,6 +4,7 @@ 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,49 +263,6 @@ 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);
@@ -319,7 +276,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, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
+        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(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/ServiceLinesTemplate/index.d.ts

@@ -3,6 +3,7 @@ type ServiceLinesTemplateProps = {
     getFreelancerDataResult?: any;
     createOrUpdateRates?: any;
     updateExpert?: any;
+    currentFeatureStatus?: any;
     openServiceLinesTemplate?: boolean;
     setOpenServiceLinesTemplate?: any;
     getRatesByExpertId?: any;
@@ -16,6 +17,7 @@ type ServiceLinesTemplateProps = {
     servicePricesList?: any;
     isInternalProfile?: boolean;
     updateFreelancerPreferences?: any;
+    getExpertVanityTitles?: any;
 };
-export declare const ServiceLinesTemplate: ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList, isInternalProfile, updateFreelancerPreferences, }: ServiceLinesTemplateProps) => false | React.JSX.Element | undefined;
+export declare const ServiceLinesTemplate: ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, currentFeatureStatus, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList, isInternalProfile, updateFreelancerPreferences, getExpertVanityTitles, }: ServiceLinesTemplateProps) => false | React.JSX.Element | undefined;
 export {};

package/lib/components/ServiceLinesTemplate/index.js

@@ -39,26 +39,43 @@ const icons_1 = require("@material-ui/icons");
 const ReviewsTab_1 = require("../ReviewsTab/ReviewsTab");
 const base_ui_1 = require("@paro.io/base-ui");
 const utils_1 = require("../shared/utils");
-const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList = [], isInternalProfile = false, updateFreelancerPreferences, }) => {
+const lab_1 = require("@material-ui/lab");
+const react_hot_toast_1 = require("react-hot-toast");
+const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, currentFeatureStatus, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList = [], isInternalProfile = false, updateFreelancerPreferences, getExpertVanityTitles, }) => {
     const [selectedServices, dispatch] = (0, react_1.useReducer)(utils_1.selectedServicesReducer, selectedServicesList);
     const [updateClicked, setUpdateClicked] = (0, react_1.useState)(false);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [serviceLines, setServiceLines] = (0, react_1.useState)(serviceLineData);
     const [currentServiveRate, setCurrentServiceRate] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)(0);
+    const [titleOptions, setTitleOptions] = (0, react_1.useState)([]);
+    const [selectedTitle, setSelectedTitle] = (0, react_1.useState)(null);
+    const [customTitle, setCustomTitle] = (0, react_1.useState)(null);
+    const [featureStatus, setCurrentFeatureStatus] = (0, react_1.useState)(currentFeatureStatus);
     const fetchServiceLineData = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         try {
             setLoading(true);
+            if (!isInternalProfile) {
+                const [expertVanityTitles] = yield Promise.all([
+                    getExpertVanityTitles({ fetchPolicy: 'network-only' }),
+                ]);
+                const expertTitles = (_a = expertVanityTitles === null || expertVanityTitles === void 0 ? void 0 : expertVanityTitles.data) === null || _a === void 0 ? void 0 : _a.getExpertVanityTitles;
+                setTitleOptions(expertTitles);
+            }
             const [freelancerResponse, serviceLinesResponse, ratesResponse] = yield Promise.all([
                 getFreelancerDataResult({ variables: { legacyFreelancerId: legacyFreelancerId }, skip: !legacyFreelancerId, fetchPolicy: 'network-only' }),
                 getServiceLines({ fetchPolicy: 'network-only', }),
                 getRatesByExpertId({ variables: { expertId }, skip: !expertId, fetchPolicy: 'network-only' }),
             ]);
-            setServiceLines(((_a = serviceLinesResponse === null || serviceLinesResponse === void 0 ? void 0 : serviceLinesResponse.data) === null || _a === void 0 ? void 0 : _a.getServiceLines) || serviceLineData);
-            const currentService = (_d = (_c = (_b = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _b === void 0 ? void 0 : _b.getExpertByLegacyFreelancerId) === null || _c === void 0 ? void 0 : _c.legacyMetadata) === null || _d === void 0 ? void 0 : _d.primaryServiceLine;
-            const currentRate = (_g = (_f = (_e = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _e === void 0 ? void 0 : _e.getExpertByLegacyFreelancerId) === null || _f === void 0 ? void 0 : _f.legacyMetadata) === null || _g === void 0 ? void 0 : _g.defaultHourlyRate;
-            const expertRates = (_h = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.data) === null || _h === void 0 ? void 0 : _h.getRatesByExpertId;
+            setServiceLines(((_b = serviceLinesResponse === null || serviceLinesResponse === void 0 ? void 0 : serviceLinesResponse.data) === null || _b === void 0 ? void 0 : _b.getServiceLines) || serviceLineData);
+            const currentService = (_e = (_d = (_c = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _c === void 0 ? void 0 : _c.getExpertByLegacyFreelancerId) === null || _d === void 0 ? void 0 : _d.legacyMetadata) === null || _e === void 0 ? void 0 : _e.primaryServiceLine;
+            const currentRate = (_h = (_g = (_f = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _f === void 0 ? void 0 : _f.getExpertByLegacyFreelancerId) === null || _g === void 0 ? void 0 : _g.legacyMetadata) === null || _h === void 0 ? void 0 : _h.defaultHourlyRate;
+            const expertRates = (_j = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.data) === null || _j === void 0 ? void 0 : _j.getRatesByExpertId;
+            setCurrentFeatureStatus((_l = (_k = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _k === void 0 ? void 0 : _k.getExpertByLegacyFreelancerId) === null || _l === void 0 ? void 0 : _l.featureStatus);
             setCurrentServiceRate(currentRate);
+            const isTitleExists = (_o = (_m = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _m === void 0 ? void 0 : _m.getExpertByLegacyFreelancerId) === null || _o === void 0 ? void 0 : _o.vanityTitle;
+            isTitleExists ? setSelectedTitle(isTitleExists) : setValue(1);
             dispatch({
                 currentService,
                 currentRate,
@@ -103,6 +120,34 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             },
         });
     };
+    const handleUpdateExpertTitle = () => __awaiter(void 0, void 0, void 0, function* () {
+        setUpdateClicked(true);
+        updateExpert({
+            variables: {
+                expertId: expertId,
+                input: {
+                    vanityTitle: selectedTitle === 'Other' ? customTitle : selectedTitle,
+                    featureStatus: Object.assign({}, featureStatus)
+                }
+            },
+        }).then(() => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'success',
+                message: 'Expertise title Updated successfully!',
+                icon: 'success',
+            });
+        }).catch((error) => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'warning',
+                message: 'Failed to update expertise title.',
+                icon: 'warning'
+            });
+        }).finally(() => {
+            setUpdateClicked(false);
+        });
+    });
     const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             setUpdateClicked(true);
@@ -131,6 +176,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
         }
         finally {
             setOpenServiceLinesTemplate && setOpenServiceLinesTemplate(false);
+            setUpdateClicked(false);
         }
         ;
     });
@@ -139,7 +185,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             variables: {
                 expertId: expertId,
                 input: {
-                    featureStatus: { "serviceLines": true }
+                    featureStatus: Object.assign({ "serviceLines": true }, featureStatus)
                 }
             },
         }).then(() => {
@@ -187,45 +233,110 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             type: 'update'
         });
     };
+    const handleChange = (event, newValue) => {
+        if (newValue >= 0) {
+            setValue(newValue);
+        }
+    };
+    const handleChangeTitle = (event) => {
+        setSelectedTitle(event.target.value);
+    };
+    const ActionButtons = () => {
+        return 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: value === 1 ? handleUpdateExpertTitle : handleUpdateProfile, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary" }),
+            react_1.default.createElement(base_ui_1.Button, { label: "NOT INTERESTED", onClick: handleNotInterestedClick, type: "button", disabled: updateClicked, isLoading: updateClicked }));
+    };
+    const ServiceLinesTab = () => {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Grid, { style: { backgroundColor: '#132f4a', padding: 12 }, className: "service-lines-header" },
+                react_1.default.createElement(core_1.Typography, { className: "headerTop", variant: "h5", style: { color: '#ffffff', fontWeight: 500, padding: 12, justifyContent: 'space-between', display: 'flex', alignItems: 'center' } },
+                    "Expand Your Expertise: Add More Services to Your Profile",
+                    react_1.default.createElement("img", { src: 'https://expert-files-dev.s3.us-east-1.amazonaws.com/ParoGroupLogo.png', alt: "Paro Group Logo", style: { width: 24, height: 24, marginLeft: 8 } })),
+                react_1.default.createElement(core_1.Typography, { className: "headerMiddle", style: { color: '#ffffff', fontWeight: 200, fontStyle: 'italic', paddingLeft: 12 } }, "Why Add More Services?"),
+                react_1.default.createElement(core_1.Grid, { container: true, spacing: 3, style: { padding: 12, color: '#ffffff' }, direction: "row", justifyContent: "flex-start", alignItems: "center" }, utils_1.features.map((feature, index) => (react_1.default.createElement(core_1.Box, { key: index, display: "flex", alignItems: "center", m: 2 },
+                    react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                            marginRight: 8,
+                            color: '#2A9D8F',
+                            fontSize: 20
+                        }, className: "headerCircle" }),
+                    react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { color: '#ffffff' } }, feature)))))),
+            react_1.default.createElement(core_1.Grid, { container: true, style: { padding: 4 } },
+                react_1.default.createElement(core_1.Typography, { variant: "h6", style: { marginLeft: 20, fontWeight: 500 } }, "Select from the following service lines:"),
+                react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justifyContent: "space-evenly", alignItems: "center" }, services === null || services === void 0 ? void 0 :
+                    services.map((service, index) => {
+                        const serviceExistsInArray = selectedServices.find((svc) => svc.service === service.title);
+                        return (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 5, key: index, style: { margin: 12 } },
+                            react_1.default.createElement(core_1.Box, { sx: { display: "flex" } },
+                                react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center' },
+                                    react_1.default.createElement(CustomCheckbox, { checked: serviceExistsInArray, disabled: serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, onChange: () => handleServiceToggle(service.title) })),
+                                react_1.default.createElement(core_1.Box, { sx: { flex: 1 } },
+                                    react_1.default.createElement(core_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 } },
+                                        react_1.default.createElement(core_1.Box, null,
+                                            react_1.default.createElement(core_1.Typography, { component: "div", style: { fontWeight: 300, fontSize: 16 } },
+                                                service.title,
+                                                (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService) && (react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: 16 } }, "\u00A0(current service line)"))),
+                                            react_1.default.createElement(core_1.Typography, { variant: "body2", style: { fontWeight: 50, fontSize: 14 } }, service.description)),
+                                        react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center', ml: 4 },
+                                            react_1.default.createElement(core_1.TextField, { size: "small", variant: "outlined", value: (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.rate) || '', onChange: (e) => handlePriceChange(service.title, e.target.value ? parseInt(e.target.value) : 0, serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService), InputProps: {
+                                                    startAdornment: react_1.default.createElement(core_1.Typography, null, "$\u00A0"),
+                                                    endAdornment: react_1.default.createElement(core_1.Typography, null, "\u00A0/hr"),
+                                                }, style: { width: 100 }, required: serviceExistsInArray, error: serviceExistsInArray && !serviceExistsInArray.rate, label: "Rate", className: "serviceLineRateInput" })))))));
+                    }),
+                    react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 5, style: { margin: 5 } }, ActionButtons())))));
+    };
+    const VanityTitlesTab = () => {
+        var _a;
+        return react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: "row", spacing: 1 },
+            react_1.default.createElement(core_1.Grid, { style: { backgroundColor: '#132f4a', padding: 12 }, xs: 12, sm: 6 },
+                react_1.default.createElement(core_1.Typography, { className: "headerTop", variant: "h5", style: { color: 'white', fontWeight: 500, padding: 12, justifyContent: 'space-between', display: 'flex', alignItems: 'center' } },
+                    "Make your new identity standout",
+                    react_1.default.createElement("img", { src: 'https://expert-files-dev.s3.us-east-1.amazonaws.com/ParoGroupLogo.png', alt: "Paro Group Logo", style: { width: 24, height: 24, marginLeft: 8 } })),
+                react_1.default.createElement(core_1.Typography, { className: "headerMiddle", style: { color: '#ffffff', fontWeight: 200, fontStyle: 'italic', paddingLeft: 12 } }, "Why Add a Job Title to Your Profile?"),
+                react_1.default.createElement(core_1.Grid, { container: true, spacing: 3, style: { padding: 12 }, direction: "row", justifyContent: "flex-start", alignItems: "center" }, utils_1.titleFeatures.map((feature, index) => {
+                    const [boldText, text] = feature.split(':');
+                    return react_1.default.createElement(core_1.Box, { key: index, display: "flex", alignItems: "center", m: 2 },
+                        react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                                marginRight: 8,
+                                color: '#2A9D8F',
+                                fontSize: 20
+                            }, className: "headerCircle" }),
+                        react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { color: '#a5b1bc' } },
+                            react_1.default.createElement("strong", { className: "text-[#f1f1f1]" },
+                                boldText,
+                                ":"),
+                            text));
+                }))),
+            react_1.default.createElement(core_1.Grid, { xs: 12, sm: 6, style: { paddingLeft: 18 }, 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 } }, "Expertise Title")),
+                react_1.default.createElement(core_1.Grid, { item: true, style: { marginBottom: 12, width: '70%' } },
+                    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: '70%' } },
+                    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" })),
+                ActionButtons()));
+    };
     return (openServiceLinesTemplate && (react_1.default.createElement(core_1.Grid, { style: { backgroundColor: '#fff' } }, loading ? (react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px" },
         react_1.default.createElement(core_1.CircularProgress, null))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Grid, { style: { backgroundColor: '#132f4a', padding: 12 }, className: "service-lines-header" },
-            react_1.default.createElement(core_1.Typography, { className: "headerTop", variant: "h5", style: { color: '#ffffff', fontWeight: 500, padding: 12, justifyContent: 'space-between', display: 'flex', alignItems: 'center' } },
-                "Expand Your Expertise: Add More Services to Your Profile",
-                react_1.default.createElement("img", { src: 'https://expert-files-dev.s3.us-east-1.amazonaws.com/ParoGroupLogo.png', alt: "Paro Group Logo", style: { width: 24, height: 24, marginLeft: 8 } })),
-            react_1.default.createElement(core_1.Typography, { className: "headerMiddle", style: { color: '#ffffff', fontWeight: 200, fontStyle: 'italic', paddingLeft: 12 } }, "Why Add More Services?"),
-            react_1.default.createElement(core_1.Grid, { container: true, spacing: 3, style: { padding: 12, color: '#ffffff' }, direction: "row", justifyContent: "flex-start", alignItems: "center" }, utils_1.features.map((feature, index) => (react_1.default.createElement(core_1.Box, { key: index, display: "flex", alignItems: "center", m: 2 },
-                react_1.default.createElement(icons_1.AdjustRounded, { style: {
-                        marginRight: 8,
-                        color: '#2A9D8F',
-                        fontSize: 20
-                    }, className: "headerCircle" }),
-                react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { color: '#ffffff' } }, feature)))))),
-        react_1.default.createElement(core_1.Grid, { container: true, style: { padding: 4 } },
-            react_1.default.createElement(core_1.Typography, { variant: "h6", style: { marginLeft: 20, fontWeight: 500 } }, "Select from the following service lines:"),
-            react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justifyContent: "space-evenly", alignItems: "center" }, services === null || services === void 0 ? void 0 :
-                services.map((service, index) => {
-                    const serviceExistsInArray = selectedServices.find((svc) => svc.service === service.title);
-                    return (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 5, key: index, style: { margin: 12 } },
-                        react_1.default.createElement(core_1.Box, { sx: { display: "flex" } },
-                            react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center' },
-                                react_1.default.createElement(CustomCheckbox, { checked: serviceExistsInArray, disabled: serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, onChange: () => handleServiceToggle(service.title) })),
-                            react_1.default.createElement(core_1.Box, { sx: { flex: 1 } },
-                                react_1.default.createElement(core_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 } },
-                                    react_1.default.createElement(core_1.Box, null,
-                                        react_1.default.createElement(core_1.Typography, { component: "div", style: { fontWeight: 300, fontSize: 16 } },
-                                            service.title,
-                                            (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService) && (react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: 16 } }, "\u00A0(current service line)"))),
-                                        react_1.default.createElement(core_1.Typography, { variant: "body2", style: { fontWeight: 50, fontSize: 14 } }, service.description)),
-                                    react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center', ml: 4 },
-                                        react_1.default.createElement(core_1.TextField, { size: "small", variant: "outlined", value: (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.rate) || '', onChange: (e) => handlePriceChange(service.title, e.target.value ? parseInt(e.target.value) : 0, serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService), InputProps: {
-                                                startAdornment: react_1.default.createElement(core_1.Typography, null, "$\u00A0"),
-                                                endAdornment: react_1.default.createElement(core_1.Typography, null, "\u00A0/hr"),
-                                            }, style: { width: 100 }, required: serviceExistsInArray, error: serviceExistsInArray && !serviceExistsInArray.rate, label: "Rate", className: "serviceLineRateInput" })))))));
-                }),
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 5, style: { margin: 5 } },
-                    react_1.default.createElement(core_1.Box, { sx: { display: "flex", justifyContent: "space-evenly", mt: 4 } },
-                        react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateProfile, type: "button", disabled: isUpdateButtonDisabled(), color: "primary" }),
-                        react_1.default.createElement(base_ui_1.Button, { label: "NOT INTERESTED", onClick: handleNotInterestedClick, type: "button", disabled: updateClicked }))))))))));
+        isInternalProfile ?
+            react_1.default.createElement(react_1.default.Fragment, null, ServiceLinesTab())
+            :
+                react_1.default.createElement(lab_1.TabContext, { value: value + '' },
+                    react_1.default.createElement(core_1.AppBar, { position: 'static', color: 'inherit', style: { backgroundColor: 'transparent', boxShadow: 'none' } },
+                        react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: value, onChange: handleChange, variant: "scrollable", scrollButtons: "on" },
+                            react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center" }, "Add Additional Service Lines") }),
+                            react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center" }, "Add a Title to Your Profile") }))),
+                    react_1.default.createElement(lab_1.TabPanel, { value: '0' }, ServiceLinesTab()),
+                    react_1.default.createElement(lab_1.TabPanel, { value: '1' }, VanityTitlesTab())),
+        react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
+                style: {
+                    zIndex: 9999,
+                    backgroundColor: 'transparent'
+                },
+            } }))))));
 };
 exports.ServiceLinesTemplate = ServiceLinesTemplate;

package/lib/components/shared/utils.d.ts

@@ -36,6 +36,7 @@ export declare const DOCUMENT_TYPE_CONSTANTS: {
 };
 export declare const titleMappings: Record<string, string>;
 export declare const features: string[];
+export declare const titleFeatures: string[];
 export declare const serviceDescriptions: Record<string, string>;
 export declare const selectedServicesReducer: (selectedServices: any, action: any) => any;
 export declare const sharedUtils: {

package/lib/components/shared/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sharedUtils = exports.selectedServicesReducer = exports.serviceDescriptions = exports.features = exports.titleMappings = exports.DOCUMENT_TYPE_CONSTANTS = exports.validateFileUpload = exports.showToast = exports.MAX_FILE_SIZE = exports.ACCEPTED_FILE_TYPES = exports.formatDate = exports.CustomPaper = exports.handleDownloadPdf = exports.getFileMimeType = exports.stateAbbreviationMap = exports.getPreviousMonthStartDate = exports.isOlderThan30Days = exports.formatTenure = exports.isOnClickEvent = void 0;
+exports.sharedUtils = exports.selectedServicesReducer = exports.serviceDescriptions = exports.titleFeatures = exports.features = exports.titleMappings = exports.DOCUMENT_TYPE_CONSTANTS = exports.validateFileUpload = exports.showToast = exports.MAX_FILE_SIZE = exports.ACCEPTED_FILE_TYPES = exports.formatDate = exports.CustomPaper = exports.handleDownloadPdf = exports.getFileMimeType = exports.stateAbbreviationMap = exports.getPreviousMonthStartDate = exports.isOlderThan30Days = exports.formatTenure = exports.isOnClickEvent = void 0;
 exports.getComparator = getComparator;
 exports.stableSort = stableSort;
 exports.compareItems = compareItems;
@@ -285,6 +285,12 @@ exports.features = [
     "Stand out from competitors by showcasing the full range of your skills",
     "Attract more opportunities to grow your business",
 ];
+exports.titleFeatures = [
+    "Showcase Your Brand: Your job title is the first impression Clients get of your professional identity. Whether you call yourself a 'Consultant', 'Financial Strategist', or 'Business Advisor', this title tells Clients who you are at a glance.",
+    "Control your Narrative: Your job title gives you the opportunity to shape how Clients perceive you, positioning yourself as a trusted expert in your field.",
+    "Highlight your Versatitlity: If you work accross multiple functions, a job title reflects your ability to deliver  a broad range of value. It helps Clients understand the bigger picture of your skill set.",
+    "Attract the right Clients: By choosing a title that aligns with your target audience, you make it easier for Clients to see you as the perfect fit for their needs.",
+];
 exports.serviceDescriptions = {
     "Full Charge Bookkeeping": "Work directly with companies to set up, clean, maintain, and/or reconcile their books and records. This service requires in-depth expertise and insights into their financials. Example Deliverables: Chart of Accounts, Journal Entry Posting, etc.",
     "Chief Financial Officer (CFO)": "A senior executive expected to offer financial guidance and strategy for for-profit and/or nonprofit organizations. From leading the entire finance function to going even deeper internally to help owners keep and strengthen their financial footing. 10+ years of professional corporate finance experience, MBA, CFA, and/or CPA's are common in this role.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "",
   "main": "lib/index.js",
   "scripts": {