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

package/lib/components/ServiceLinesTemplate/index.js

@@ -39,22 +39,33 @@ 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 theme = (0, core_1.useTheme)();
+    const isSmallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    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 +84,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 +156,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             });
         }).finally(() => {
             setUpdateClicked(false);
+            setDisablePublicProfile(false);
         });
     });
     const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -172,16 +186,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 +214,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 +242,131 @@ 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: '18px', fontWeight: 600, fontFamily: "Roboto" } }, "Expand Your Expertise"),
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", style: { color: '#1C1F2B', fontSize: '12px', fontWeight: 600, fontFamily: "Roboto" } }, "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: '4px 16px' } },
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", style: { fontSize: '10px', fontWeight: 600, fontFamily: "Roboto" } },
+                                "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: '14px', fontWeight: 400, marginTop: '8px', marginBottom: '8px', fontFamily: "Roboto" } }, "Why Add More Services?")),
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: isSmallScreen ? "column" : "row", justifyContent: "space-between", alignItems: "center", 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: '16px'
+                                }, className: "headerCircle" }),
+                            react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '12px', fontWeight: 400, fontFamily: "Roboto" } }, "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: '16px'
+                                }, className: "headerCircle" }),
+                            react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '12px', fontWeight: 400, fontFamily: "Roboto" } }, "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: '12px', fontWeight: 600, fontFamily: "Roboto" } }, "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: '12px', color: '#1C1F2B', fontFamily: "Roboto" } },
+                                                    service.title,
+                                                    (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService) && (react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: '12px', fontStyle: 'italic', fontFamily: "Roboto" } }, "\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: '12px', fontFamily: "Roboto" } }, 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: '18px', fontWeight: 600, fontFamily: "Roboto" } }, "Give your Expertise a Title"),
+                                react_1.default.createElement(core_1.Typography, { variant: "body2", style: { color: '#1C1F2B', fontSize: '12px', fontWeight: 600, fontFamily: "Roboto" } }, "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: '4px 16px' } },
+                                react_1.default.createElement(core_1.Typography, { variant: "body2", style: { fontSize: '10px', fontWeight: 600, fontFamily: "Roboto" } },
+                                    "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: '14px', fontWeight: 400, marginTop: '16px', marginBottom: '16px', fontFamily: "Roboto" } }, "Why Add a Job Title to Your Profile?")),
+                        react_1.default.createElement(core_1.Grid, { container: true, item: true, direction: isSmallScreen ? "column" : "row", justifyContent: "space-between", alignItems: "center", 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: '16px'
+                                    }, className: "headerCircle" }),
+                                react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '12px', fontWeight: 400, fontFamily: "Roboto" } },
+                                    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: '16px'
+                                    }, className: "headerCircle" }),
+                                react_1.default.createElement(core_1.Typography, { className: "headerFeature", variant: "body2", style: { fontSize: '12px', fontWeight: 400, fontFamily: "Roboto" } },
+                                    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, fontFamily: "Roboto", fontSize: '12px' } }, "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/lib/components/shared/Error.d.ts

@@ -1,6 +1,6 @@
-type SectionContents = {
-    handleClose?: (...args: any) => void;
-    formError?: boolean;
-};
-declare const Error: ({ handleClose }: SectionContents) => JSX.Element;
-export default Error;
+type SectionContents = {
+    handleClose?: (...args: any) => void;
+    formError?: boolean;
+};
+declare const Error: ({ handleClose }: SectionContents) => JSX.Element;
+export default Error;

package/lib/components/shared/Error.js

@@ -1,40 +1,40 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const core_1 = require("@material-ui/core");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = __importDefault(require("../shared/constants/colors"));
-const CopyToClipboardAlert_1 = __importDefault(require("./CopyToClipboardAlert"));
-const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
-  width: 100%;
-  padding-bottom: 100;
-`;
-const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
-  color: ${colors_1.default.paroBlack};
-  padding: 0px 0px 18px 0px;
-`;
-const ParoSubtitle = styled_components_1.default.div `
-  color: ${colors_1.default.paroBlack};
-  margin-bottom: 24px;
-  font-size: 1rem;
-`;
-const reloadWindow = () => {
-    window.location.reload();
-};
-const Error = ({ handleClose }) => {
-    const handleCancel = handleClose ? handleClose : reloadWindow;
-    const handleCancelLanguage = handleClose ? 'Close' : 'Retry';
-    return (react_1.default.createElement(ErrorBox, null,
-        react_1.default.createElement(core_1.Box, { display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '100px 0px 36px 5px;' },
-            react_1.default.createElement(core_1.Typography, { variant: 'h6', gutterBottom: true },
-                react_1.default.createElement(ParoTitle, null, "Oops! We had a misstep.")),
-            react_1.default.createElement(core_1.Typography, { component: 'span', gutterBottom: true },
-                react_1.default.createElement(ParoSubtitle, null, "Contact support if the issue persists")),
-            react_1.default.createElement(core_1.DialogActions, null,
-                react_1.default.createElement(core_1.Button, { variant: 'outlined', onClick: handleCancel, color: 'primary' }, handleCancelLanguage),
-                react_1.default.createElement(CopyToClipboardAlert_1.default, { alertMessage: 'Email address copied to clipboard', button: core_1.Button, buttonContent: 'Copy support email', copyContent: 'people@paro.io', variant: 'contained' })))));
-};
-exports.default = Error;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = __importDefault(require("../shared/constants/colors"));
+const CopyToClipboardAlert_1 = __importDefault(require("./CopyToClipboardAlert"));
+const ErrorBox = (0, styled_components_1.default)(core_1.Box) `
+  width: 100%;
+  padding-bottom: 100;
+`;
+const ParoTitle = (0, styled_components_1.default)(core_1.Box) `
+  color: ${colors_1.default.paroBlack};
+  padding: 0px 0px 18px 0px;
+`;
+const ParoSubtitle = styled_components_1.default.div `
+  color: ${colors_1.default.paroBlack};
+  margin-bottom: 24px;
+  font-size: 1rem;
+`;
+const reloadWindow = () => {
+    window.location.reload();
+};
+const Error = ({ handleClose }) => {
+    const handleCancel = handleClose ? handleClose : reloadWindow;
+    const handleCancelLanguage = handleClose ? 'Close' : 'Retry';
+    return (react_1.default.createElement(ErrorBox, null,
+        react_1.default.createElement(core_1.Box, { display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '100px 0px 36px 5px;' },
+            react_1.default.createElement(core_1.Typography, { variant: 'h6', gutterBottom: true },
+                react_1.default.createElement(ParoTitle, null, "Oops! We had a misstep.")),
+            react_1.default.createElement(core_1.Typography, { component: 'span', gutterBottom: true },
+                react_1.default.createElement(ParoSubtitle, null, "Contact support if the issue persists")),
+            react_1.default.createElement(core_1.DialogActions, null,
+                react_1.default.createElement(core_1.Button, { variant: 'outlined', onClick: handleCancel, color: 'primary' }, handleCancelLanguage),
+                react_1.default.createElement(CopyToClipboardAlert_1.default, { alertMessage: 'Email address copied to clipboard', button: core_1.Button, buttonContent: 'Copy support email', copyContent: 'people@paro.io', variant: 'contained' })))));
+};
+exports.default = Error;

package/lib/components/shared/Image.js

@@ -31,20 +31,20 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("@material-ui/core");
 const styled_components_1 = __importDefault(require("styled-components"));
 const cdn_1 = require("./constants/cdn");
-const ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 4px solid #F8FAFC;
-  border-radius: 10px;
-  object-fit: cover;
-  object-position: top;
+const ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 4px solid #F8FAFC;
+  border-radius: 10px;
+  object-fit: cover;
+  object-position: top;
 `;
-const PhotoChangeButton = (0, styled_components_1.default)(core_1.Typography) `
-  text-decoration: underline;
-  cursor: pointer;
-  :active {
-    text-decoration: none !important;
-  }
+const PhotoChangeButton = (0, styled_components_1.default)(core_1.Typography) `
+  text-decoration: underline;
+  cursor: pointer;
+  :active {
+    text-decoration: none !important;
+  }
 `;
 exports.defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
 const Image = ({ imageUrl, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, legacyFreelancerId, }) => {

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

@@ -1,18 +1,18 @@
-import { FieldError } from 'react-hook-form/dist/types/form';
-type SectionContents = {
-    defaultValue?: string | number;
-    error?: boolean;
-    helperText: string | undefined | (FieldError | undefined)[];
-    inputRef?: ((instance: any) => void) | null | undefined;
-    label?: string;
-    multiline?: boolean;
-    name?: string;
-    placeholder?: string;
-    props?: unknown;
-    size?: 'small' | 'medium' | undefined;
-    onChange?: ((value: any) => void) | undefined;
-    width?: boolean;
-    InputProps?: any;
-};
-declare const ProfileTextField: ({ defaultValue, error, helperText, inputRef, label, multiline, name, placeholder, props, size, width, onChange, InputProps }: SectionContents) => JSX.Element;
-export default ProfileTextField;
+import { FieldError } from 'react-hook-form/dist/types/form';
+type SectionContents = {
+    defaultValue?: string | number;
+    error?: boolean;
+    helperText: string | undefined | (FieldError | undefined)[];
+    inputRef?: ((instance: any) => void) | null | undefined;
+    label?: string;
+    multiline?: boolean;
+    name?: string;
+    placeholder?: string;
+    props?: unknown;
+    size?: 'small' | 'medium' | undefined;
+    onChange?: ((value: any) => void) | undefined;
+    width?: boolean;
+    InputProps?: any;
+};
+declare const ProfileTextField: ({ defaultValue, error, helperText, inputRef, label, multiline, name, placeholder, props, size, width, onChange, InputProps }: SectionContents) => JSX.Element;
+export default ProfileTextField;

package/lib/components/shared/ProfileTextField.js

@@ -1,16 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-const ProfileTextField = ({ defaultValue, error, helperText, inputRef, label, multiline = false, name, placeholder, props, size, width = false, onChange, InputProps }) => {
-    return (onChange ? react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
-            shrink: true
-        }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined', onChange: onChange, classes: { root: 'inputCurrency' } })) :
-        react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
-                shrink: true
-            }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined' })));
-};
-exports.default = ProfileTextField;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+const ProfileTextField = ({ defaultValue, error, helperText, inputRef, label, multiline = false, name, placeholder, props, size, width = false, onChange, InputProps }) => {
+    return (onChange ? react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
+            shrink: true
+        }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined', onChange: onChange, classes: { root: 'inputCurrency' } })) :
+        react_1.default.createElement(TextField_1.default, Object.assign({ InputProps: InputProps, "x-id": 'TextField' }, props, { defaultValue: defaultValue, error: error, fullWidth: true, helperText: helperText, InputLabelProps: {
+                shrink: true
+            }, inputRef: inputRef, label: label, margin: 'normal', multiline: multiline, name: name, placeholder: placeholder, size: size, style: Object.assign({ marginTop: '8px' }, (width && { width: '100%' })), variant: 'outlined' })));
+};
+exports.default = ProfileTextField;

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

@@ -1,7 +1,7 @@
-declare const StyledActionButtons: ({ closeOnClick, isDisabled, isLoading, handleSubmit }: {
-    closeOnClick: () => void;
-    isDisabled: boolean;
-    isLoading: boolean;
-    handleSubmit?: () => void;
-}) => JSX.Element;
-export default StyledActionButtons;
+declare const StyledActionButtons: ({ closeOnClick, isDisabled, isLoading, handleSubmit }: {
+    closeOnClick: () => void;
+    isDisabled: boolean;
+    isLoading: boolean;
+    handleSubmit?: () => void;
+}) => JSX.Element;
+export default StyledActionButtons;

package/lib/components/shared/StyledActionButtons.js

@@ -1,15 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const core_1 = require("@material-ui/core");
-const Button_1 = __importDefault(require("@material-ui/core/Button"));
-const Loader_1 = __importDefault(require("./Loader"));
-const StyledActionButtons = ({ closeOnClick, isDisabled, isLoading, handleSubmit }) => {
-    return (react_1.default.createElement(core_1.DialogActions, null,
-        react_1.default.createElement(Button_1.default, { variant: 'outlined', onClick: closeOnClick, color: 'primary' }, "Close"),
-        react_1.default.createElement(Button_1.default, { color: 'default', disabled: isDisabled, key: String(isDisabled), onClick: handleSubmit, variant: 'contained' }, isLoading ? react_1.default.createElement(Loader_1.default, { key: String(isLoading) }) : 'Save')));
-};
-exports.default = StyledActionButtons;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const Button_1 = __importDefault(require("@material-ui/core/Button"));
+const Loader_1 = __importDefault(require("./Loader"));
+const StyledActionButtons = ({ closeOnClick, isDisabled, isLoading, handleSubmit }) => {
+    return (react_1.default.createElement(core_1.DialogActions, null,
+        react_1.default.createElement(Button_1.default, { variant: 'outlined', onClick: closeOnClick, color: 'primary' }, "Close"),
+        react_1.default.createElement(Button_1.default, { color: 'default', disabled: isDisabled, key: String(isDisabled), onClick: handleSubmit, variant: 'contained' }, isLoading ? react_1.default.createElement(Loader_1.default, { key: String(isLoading) }) : 'Save')));
+};
+exports.default = StyledActionButtons;