@paro.io/expert-shared-components 1.7.9 → 1.8.2

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, 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(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
         react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
                 style: {
                     zIndex: 9999,

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/ExpertProfileHeader/NetworkSection.js

@@ -123,7 +123,7 @@ const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, d
             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(core_1.Typography, { variant: "body2", style: { marginRight: '20px' } }, "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))),

package/lib/components/HeaderNavBar/index.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const HeaderNavBar: ({ setOpenDocumentModal, setOpenServiceLinesTemplate }: any) => React.JSX.Element;
+export declare const HeaderNavBar: ({ setOpenDocumentModal, setOpenServiceLinesTemplate, isClientPortal }: any) => React.JSX.Element;

package/lib/components/HeaderNavBar/index.js

@@ -7,10 +7,10 @@ exports.HeaderNavBar = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("@material-ui/core");
 const base_icons_1 = require("@paro.io/base-icons");
-const HeaderNavBar = ({ setOpenDocumentModal, setOpenServiceLinesTemplate }) => {
+const HeaderNavBar = ({ setOpenDocumentModal, setOpenServiceLinesTemplate, isClientPortal = false }) => {
     return (react_1.default.createElement("div", { className: "flex w-full bg-white p-1 shadow-sm justify-end" },
         react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } },
-            react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Service Lines" },
+            !isClientPortal && react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Service Lines" },
                 react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenServiceLinesTemplate(true) },
                     " ",
                     react_1.default.createElement(base_icons_1.IconBriefcase, { size: "md" }),

package/lib/components/ServiceLinesTemplate/index.d.ts

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

package/lib/components/ServiceLinesTemplate/index.js

@@ -39,39 +39,52 @@ 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 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 ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, openServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList = [], isInternalProfile = false, updateFreelancerPreferences, getExpertVanityTitles, reactAppUrl, }) => {
     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 [loading, setLoading] = (0, react_1.useState)(true);
     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 [expandedServices, setExpandedServices] = (0, react_1.useState)(new Map());
+    const [currentFeatureStatus, setCurrentFeatureStatus] = (0, react_1.useState)({});
+    const [disablePublicProfile, setDisablePublicProfile] = (0, react_1.useState)(true);
+    const handleExpandToggle = (serviceTitle) => {
+        setExpandedServices(prev => {
+            const updatedState = new Map(prev);
+            const currentExpandedState = updatedState.get(serviceTitle) || false;
+            updatedState.set(serviceTitle, !currentExpandedState);
+            return updatedState;
+        });
+    };
     const fetchServiceLineData = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         try {
-            setLoading(true);
-            const [expertVanityTitles, freelancerResponse, serviceLinesResponse, ratesResponse] = yield Promise.all([
-                getExpertVanityTitles({ fetchPolicy: 'network-only' }),
+            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;
-            setCurrentFeatureStatus((_k = (_j = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _j === void 0 ? void 0 : _j.getExpertByLegacyFreelancerId) === null || _k === void 0 ? void 0 : _k.featureStatus);
+            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;
             setCurrentServiceRate(currentRate);
-            const expertTitles = (_l = expertVanityTitles === null || expertVanityTitles === void 0 ? void 0 : expertVanityTitles.data) === null || _l === void 0 ? void 0 : _l.getExpertVanityTitles;
-            setTitleOptions(expertTitles);
-            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);
+            const isTitleExists = (_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.vanityTitle;
+            const featureStatus = (_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.featureStatus;
+            setCurrentFeatureStatus(featureStatus);
+            isTitleExists && setSelectedTitle(isTitleExists);
             dispatch({
                 currentService,
                 currentRate,
@@ -122,8 +135,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             variables: {
                 expertId: expertId,
                 input: {
-                    vanityTitle: selectedTitle === 'Other' ? customTitle : selectedTitle,
-                    featureStatus: Object.assign({}, featureStatus)
+                    vanityTitle: selectedTitle === 'Other' ? customTitle : selectedTitle
                 }
             },
         }).then(() => {
@@ -142,6 +154,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             });
         }).finally(() => {
             setUpdateClicked(false);
+            setDisablePublicProfile(false);
         });
     });
     const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -171,17 +184,18 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             console.log('DB Updation failed: ', error.message);
         }
         finally {
-            setOpenServiceLinesTemplate && setOpenServiceLinesTemplate(false);
             setUpdateClicked(false);
+            setValue(1);
         }
         ;
     });
     const updateFeatureStatus = () => {
+        const updateFeatureStatus = Object.assign(Object.assign({}, currentFeatureStatus), { serviceLines: true });
         updateExpert({
             variables: {
                 expertId: expertId,
                 input: {
-                    featureStatus: Object.assign({ "serviceLines": true }, featureStatus)
+                    featureStatus: updateFeatureStatus
                 }
             },
         }).then(() => {
@@ -198,14 +212,11 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                 message: 'Update failed!',
                 icon: 'warning'
             });
-            console.log('DB Updation failed : ', error.message);
         }).finally(() => {
-            setOpenServiceLinesTemplate && setOpenServiceLinesTemplate(false);
+            setUpdateClicked(false);
+            setValue(1);
         });
     };
-    const handleNotInterestedClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        yield updateFeatureStatus();
-    });
     const isUpdateButtonDisabled = () => {
         if ((selectedServices === null || selectedServices === void 0 ? void 0 : selectedServices.length) === 0)
             return true;
@@ -229,110 +240,129 @@ 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 ActionButtons = (disabled) => {
+        return react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justifyContent: "space-evenly", style: { margin: 'auto' }, spacing: 2 },
+            react_1.default.createElement(base_ui_1.Button, { label: "PREVIEW PUBLIC PROFILE", onClick: () => window.open(`${reactAppUrl}/public/${legacyFreelancerId}`, '_blank'), type: "button", disabled: disabled, isLoading: updateClicked }),
+            react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateExpertTitle, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary" }));
     };
-    const VanityTitlesTab = () => {
+    const newServiceLine = () => {
         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 (react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: "column", justifyContent: "center" },
+            (value === 0 || isInternalProfile) ?
+                react_1.default.createElement(core_1.Grid, { container: true, className: "service-lines-header", direction: "column", justifyContent: "center" },
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start" },
+                        react_1.default.createElement(core_1.Grid, { item: true, direction: "column", justifyContent: "flex-start" },
+                            react_1.default.createElement(core_1.Typography, { variant: "h6", style: { color: '#12756F', fontSize: '24px', fontWeight: 600 } }, "Expand Your Expertise"),
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", style: { color: '#1C1F2B', fontSize: '16px', fontWeight: 600 } }, "Step 1: Add more services to your profile to stand out")),
+                        react_1.default.createElement(core_1.Grid, { item: true, style: { backgroundColor: '#0E3435', color: '#ffffff', borderRadius: '20px', padding: '6px 20px' } },
+                            "Step ",
+                            value + 1,
+                            " of 2")),
+                    react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: "column", justifyContent: "center", alignItems: "center" },
+                        react_1.default.createElement(core_1.Typography, { variant: "subtitle1", style: { textDecoration: 'underline', fontStyle: 'italic', fontSize: '18px', fontWeight: 400, marginTop: '8px', marginBottom: '8px' } }, "Why Add More Services?")),
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justifyContent: "space-between", alignItems: "center", xs: 10, style: { margin: 'auto' } },
+                        react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "row", alignItems: "center", width: '50%' },
+                            react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                                    marginRight: 8,
+                                    color: '#248384',
+                                    fontSize: '20px'
+                                }, className: "headerCircle" }),
+                            react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '16px', fontWeight: 400 } }, "Increase your visibility to clients searching for diverse expertise")),
+                        react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "row", alignItems: "center", width: '50%' },
+                            react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                                    marginRight: 8,
+                                    color: '#248384',
+                                    fontSize: '20px'
+                                }, className: "headerCircle" }),
+                            react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '16px', fontWeight: 400 } }, "Position yourself as a versatile professional"))),
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, style: { marginTop: '16px' } },
+                        react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontSize: '16px', fontWeight: 600 } }, "Add Service Lines to your profile:"),
+                        react_1.default.createElement(core_1.Grid, { item: true, 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);
+                            const isExpanded = expandedServices.get(service.title) || false;
+                            return (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, key: index, style: { margin: 4 } },
+                                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" } },
+                                            react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center' },
+                                                react_1.default.createElement(core_1.Typography, { component: "div", style: { fontWeight: 600, fontSize: '16px', color: '#1C1F2B' } },
+                                                    service.title,
+                                                    (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService) && (react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: '16px', fontStyle: 'italic' } }, "\u00A0(current service line)")))),
+                                            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.IconButton, { onClick: () => handleExpandToggle(service.title) }, isExpanded ? react_1.default.createElement(icons_1.ExpandLess, null) : react_1.default.createElement(icons_1.ExpandMore, null)))))),
+                                isExpanded && react_1.default.createElement(core_1.Box, { ml: 2 },
+                                    react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: '16px' } }, service.description))));
+                        }))))
+                :
+                    react_1.default.createElement(core_1.Grid, { container: true, className: "service-lines-header", direction: "column", justifyContent: "center" },
+                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justifyContent: "space-between", alignItems: "flex-start" },
+                            react_1.default.createElement(core_1.Grid, { item: true, direction: "column", justifyContent: "flex-start" },
+                                react_1.default.createElement(core_1.Typography, { variant: "h6", style: { color: '#12756F', fontSize: '24px', fontWeight: 600 } }, "Give your Expertise a Title"),
+                                react_1.default.createElement(core_1.Typography, { variant: "body2", style: { color: '#1C1F2B', fontSize: '16px', fontWeight: 600 } }, "Step 2: Showcase your profile with a title")),
+                            react_1.default.createElement(core_1.Grid, { item: true, style: { backgroundColor: '#0E3435', color: '#ffffff', borderRadius: '20px', padding: '6px 20px' } },
+                                "Step ",
+                                value + 1,
+                                " of 2")),
+                        react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: "column", justifyContent: "center", alignItems: "center" },
+                            react_1.default.createElement(core_1.Typography, { variant: "subtitle1", style: { textDecoration: 'underline', fontStyle: 'italic', fontSize: '16px', fontWeight: 400, marginTop: '16px', marginBottom: '16px' } }, "Why Add a Job Title to Your Profile?")),
+                        react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: "row", justifyContent: "space-between", alignItems: "center", xs: 10, spacing: 1, style: { margin: 'auto' } },
+                            react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "row", alignItems: "center", width: '50%' },
+                                react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                                        marginRight: 8,
+                                        color: '#248384',
+                                        fontSize: '20px'
+                                    }, className: "headerCircle" }),
+                                react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '16px', fontWeight: 400 } },
+                                    react_1.default.createElement("b", { style: { display: 'inline', whiteSpace: 'nowrap' } }, "Showcase Your Brand:"),
+                                    " Your job title is the first impression Clients get of your professional identity")),
+                            react_1.default.createElement(core_1.Box, { display: "flex", flexDirection: "row", alignItems: "center", width: '50%' },
+                                react_1.default.createElement(icons_1.AdjustRounded, { style: {
+                                        marginRight: 8,
+                                        color: '#248384',
+                                        fontSize: '20px'
+                                    }, className: "headerCircle" }),
+                                react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '16px', fontWeight: 400 } },
+                                    react_1.default.createElement("b", { style: { display: 'inline', whiteSpace: 'nowrap' } }, "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."))),
+                        react_1.default.createElement(core_1.Grid, { xs: 12, style: { marginTop: 16 }, 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 from the following Expertise titles:")),
+                            react_1.default.createElement(core_1.Grid, { item: true, style: { marginBottom: 12, width: '50%' } },
+                                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" })))),
+            (value === 1 || isInternalProfile) ?
+                react_1.default.createElement(react_1.default.Fragment, null, ActionButtons(disablePublicProfile))
+                :
+                    react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justifyContent: "flex-end", style: { marginLeft: 'auto' } },
+                        react_1.default.createElement(base_ui_1.Button, { label: "NEXT", onClick: () => handleUpdateProfile(), type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary" }))));
     };
-    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,
-        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'
-                },
-            } }))))));
+    if (loading) {
+        return (react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", width: '100%', style: { margin: 'auto' } },
+            react_1.default.createElement(core_1.CircularProgress, null)));
+    }
+    return (openServiceLinesTemplate && (react_1.default.createElement(core_1.Grid, { style: { backgroundColor: '#fff', minWidth: '100%' } },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            newServiceLine(),
+            react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
+                    style: {
+                        zIndex: 9999,
+                        backgroundColor: 'transparent'
+                    },
+                } })))));
 };
 exports.ServiceLinesTemplate = ServiceLinesTemplate;

package/package.json

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