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

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/ServiceLinesTemplate/index.d.ts

@@ -4,7 +4,6 @@ type ServiceLinesTemplateProps = {
     createOrUpdateRates?: any;
     updateExpert?: any;
     openServiceLinesTemplate?: boolean;
-    setOpenServiceLinesTemplate?: any;
     getRatesByExpertId?: any;
     setView?: any;
     getServiceLines?: any;
@@ -17,6 +16,7 @@ type ServiceLinesTemplateProps = {
     isInternalProfile?: boolean;
     updateFreelancerPreferences?: any;
     getExpertVanityTitles?: any;
+    reactAppUrl: string;
 };
-export declare const ServiceLinesTemplate: ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, 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,22 +39,31 @@ 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, 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 [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;
+        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' }),
@@ -73,7 +82,9 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             const expertRates = (_j = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.data) === null || _j === void 0 ? void 0 : _j.getRatesByExpertId;
             setCurrentServiceRate(currentRate);
             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;
-            isTitleExists ? setSelectedTitle(isTitleExists) : setValue(1);
+            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,
@@ -143,6 +154,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             });
         }).finally(() => {
             setUpdateClicked(false);
+            setDisablePublicProfile(false);
         });
     });
     const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -172,16 +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: { "serviceLines": true }
+                    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.8.0",
+  "version": "1.8.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {