@paro.io/expert-shared-components 1.8.8 → 1.9.0

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

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

package/lib/components/DocumentCenter/UploadFilesButton.js

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

package/lib/components/ExpertProfileHeader/ActionButtonSection.js

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

package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js

@@ -216,7 +216,7 @@ const ExpertProfileHeader = ({ expertId, legacyFreelancerId, address: addressFor
                 react_1.default.createElement(core_1.Divider, null),
                 react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { display: 'flex', flexWrap: isSmallScreen ? 'wrap' : 'nowrap' } },
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
-                        react_1.default.createElement(ProfileSection_1.default, { legacyFreelancerId: Number(legacyFreelancerId), imageUrl: imageUrl, shouldAllowEditProfile: isExpertOps !== null && isExpertOps !== void 0 ? isExpertOps : false, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, editServiceLine: editServiceLine, city: city, stateAbbreviation: stateAbbreviation, email: email, phone: phone, setOpen: setOpen, paroProjectsData: paroProjectsData, getUserDocument: getUserDocument, uploadUserPhotoMutation: uploadUserPhotoMutation, loadingNewImage: loadingNewImage, imageUpdateError: imageUpdateError, isInternal: isInternal, getUserByEmail: getUserByEmail, updateUserEmail: updateUserEmail, updateUserMutation: updateUserMutation, getUserByEmailLazyQuery: getUserByEmailLazyQuery, updateUserPassword: updateUserPassword, verifyUserPassword: verifyUserPassword, getExpertRates: getExpertRates }),
+                        react_1.default.createElement(ProfileSection_1.default, { legacyFreelancerId: Number(legacyFreelancerId), imageUrl: imageUrl, shouldAllowEditProfile: isExpertOps !== null && isExpertOps !== void 0 ? isExpertOps : false, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, editServiceLine: editServiceLine, city: city, stateAbbreviation: stateAbbreviation, email: email, phone: phone, setOpen: setOpen, paroTenure: paroTenure, hourlyRate: defaultHourlyRate, paroProjectsData: paroProjectsData, getUserDocument: getUserDocument, uploadUserPhotoMutation: uploadUserPhotoMutation, loadingNewImage: loadingNewImage, imageUpdateError: imageUpdateError, isInternal: isInternal, getUserByEmail: getUserByEmail, updateUserEmail: updateUserEmail, updateUserMutation: updateUserMutation, getUserByEmailLazyQuery: getUserByEmailLazyQuery, updateUserPassword: updateUserPassword, verifyUserPassword: verifyUserPassword, getExpertRates: getExpertRates }),
                         react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical', style: { marginLeft: '0px !important' } })),
                     react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
                         react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal, paroTenure: paroTenure, getExpertVanityTitles: getExpertVanityTitles, updateExpert: updateExpert, expertId: expertId, legacyFreelancerId: Number(legacyFreelancerId), vanityTitle: vanityTitle, getExpertByLegacyFreelancerIdDocument: getExpertByLegacyFreelancerIdDocument }),

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

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

package/lib/components/ExpertProfileHeader/ProfileSection.js

@@ -53,15 +53,15 @@ const formatPhoneNumber = (phone) => {
     return `(${numericPhone.slice(0, 3)}) ${numericPhone.slice(3, 6)} - ${numericPhone.slice(6)}`;
 };
 exports.formatPhoneNumber = formatPhoneNumber;
-exports.ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 1px solid ${colors_1.default.lightGray};
-  border-radius: 50%;
-  object-fit: cover;
-  object-position: top;
+exports.ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 1px solid ${colors_1.default.lightGray};
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: top;
 `;
-const ProfileSection = ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile, firstName, lastName, primaryServiceLine, editServiceLine, city, stateAbbreviation, email, phone, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, getExpertRates, }) => {
+const ProfileSection = ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile, firstName, lastName, primaryServiceLine, editServiceLine, city, stateAbbreviation, email, phone, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, getExpertRates, paroTenure, hourlyRate, }) => {
     var _a;
     const [openReviews, setOpenReviews] = (0, react_1.useState)(false);
     const [resetPasswordOpen, setResetPasswordOpen] = (0, react_1.useState)(false);
@@ -121,20 +121,30 @@ const ProfileSection = ({ legacyFreelancerId, imageUrl, shouldAllowEditProfile,
                             " Reviews")))),
             react_1.default.createElement(core_1.Box, { mt: 1, mb: 1 },
                 react_1.default.createElement(core_1.Divider, null))),
-        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-evenly' },
-            react_1.default.createElement("b", null, "SL's Offered:"),
-            react_1.default.createElement("b", null, "Hourly Exp. Rate:")),
-        react_1.default.createElement(core_1.Box, { mt: 1, mb: 1 },
-            react_1.default.createElement(core_1.Divider, null)),
-        (rates === null || rates === void 0 ? void 0 : rates.length) > 0 && (rates === null || rates === void 0 ? void 0 : rates.map((data) => (react_1.default.createElement(core_1.Box, { mt: 1, mr: 2, display: "flex", justifyContent: "space-between", alignItems: "center", key: data.serviceLine },
-            react_1.default.createElement("p", { className: `${primaryServiceLine === data.serviceLine && "text-[#248384]"}` },
-                data.serviceLine,
-                primaryServiceLine === data.serviceLine && react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("br", null),
-                    " (Primary SL)")),
-            react_1.default.createElement("b", null,
-                "$",
-                data.rate))))),
+        react_1.default.createElement(core_1.Box, { ml: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
+            react_1.default.createElement(core_1.Typography, { variant: "body2" }, "Paro Tenure"),
+            react_1.default.createElement("b", null, paroTenure.length > 0 ? paroTenure : "N/A")),
+        react_1.default.createElement(core_1.Box, { ml: 1, mt: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
+            react_1.default.createElement(core_1.Typography, { variant: "body2" }, isInternal ? 'Hourly Expert Rate' : 'Hourly Rate'),
+            react_1.default.createElement("b", null, hourlyRate > 0 ? `$ ${hourlyRate.toLocaleString()}` : "N/A")),
+        isInternal && react_1.default.createElement(core_1.Box, { ml: 1, mt: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
+            react_1.default.createElement(core_1.Typography, { variant: "body2" }, "Hourly Client Rate"),
+            react_1.default.createElement("b", null, hourlyRate > 0 ? `$ ${(hourlyRate * 2).toLocaleString()}` : "N/A")),
+        react_1.default.createElement(core_1.Box, { mt: 2, mb: 1 }),
+        (rates === null || rates === void 0 ? void 0 : rates.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-evenly' },
+                react_1.default.createElement("b", null, "Additional SL's Offered")),
+            react_1.default.createElement(core_1.Box, { mt: 1, mb: 1 },
+                react_1.default.createElement(core_1.Divider, null)), rates === null || rates === void 0 ? void 0 :
+            rates.map((data) => (react_1.default.createElement(core_1.Box, { mt: 1, mr: 2, display: "flex", justifyContent: "space-between", alignItems: "center", key: data.serviceLine },
+                react_1.default.createElement("p", { className: `${primaryServiceLine === data.serviceLine && "text-[#248384]"}` },
+                    data.serviceLine,
+                    primaryServiceLine === data.serviceLine && react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("br", null),
+                        " (Primary SL)")),
+                react_1.default.createElement("b", null,
+                    "$",
+                    data.rate)))))),
         react_1.default.createElement(core_1.Box, { mt: 1, mb: 1 },
             react_1.default.createElement(core_1.Divider, null)),
         email && react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },

package/lib/components/OrganizationChart/OrganizationChart.js

@@ -34,13 +34,13 @@ const Close_1 = __importDefault(require("@material-ui/icons/Close"));
 const cdn_1 = require("../shared/constants/cdn");
 const styled_components_1 = __importDefault(require("styled-components"));
 const defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
-const ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 1px solid #e4e5e4;
-  border-radius: 50%;
-  object-fit: cover;
-  object-position: top;
+const ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 1px solid #e4e5e4;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: top;
 `;
 const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
     '& .MuiDialog-paper': {

package/lib/components/Reviews/Pagination.js

@@ -51,12 +51,12 @@ const Pagination = ({ total, currentPage = 1, setCurrentPage, perPageItems = 10,
     };
     const numberOfPages = Math.ceil(total / perPageItems);
     return (react_1.default.createElement("div", { className: "bg-white px-4 py-3 border-t border-gray-200 sm:px-6 flex flex-col md:flex-row md:items-center md:justify-between" },
-        react_1.default.createElement("div", { className: "pb-2 md:pb-0" }, `Showing 
-          ${perPageItems * (currentPage - 1) + 1} 
-          to 
-          ${Math.min(total, perPageItems * currentPage)} 
-          of 
-          ${total}
+        react_1.default.createElement("div", { className: "pb-2 md:pb-0" }, `Showing 
+          ${perPageItems * (currentPage - 1) + 1} 
+          to 
+          ${Math.min(total, perPageItems * currentPage)} 
+          of 
+          ${total}
           ${displayText}`),
         react_1.default.createElement("div", { className: "flex items-center justify-between" },
             react_1.default.createElement("div", { className: "flex-1 flex justify-between sm:hidden" },

package/lib/components/ReviewsTab/RatingHeader.js

@@ -51,12 +51,12 @@ const isRatingExists = (rating) => {
     return false;
 };
 exports.isRatingExists = isRatingExists;
-const StyledButton = (0, styled_components_1.default)(core_2.Button) `
-    margin: 0px !important;
-    padding: 26px 0 18px 0 !important;
-    span {
-        color: #248384 !important
-     }
+const StyledButton = (0, styled_components_1.default)(core_2.Button) `
+    margin: 0px !important;
+    padding: 26px 0 18px 0 !important;
+    span {
+        color: #248384 !important
+     }
 `;
 const RatingHeader = ({ ratings, project, index, highlightedRatings, requestStatus, handleRatingRequest, loadingSubmitId, handleAddToProfile, ratingReviewButtonlabel, setOpenClientReviewModal, setShowReviewModelWithRecentlyRatedProjects, enableReviewModal, disableReviewModal, isClientPortal, isInternal, createOrUpdateRating, getParoProjectsDocument, projectIdToShow, }) => {
     var _a, _b, _c, _d;

package/lib/components/ReviewsTab/expert-shared-components.code-workspace

@@ -1,20 +1,20 @@
-{
-  "folders": [
-	{
-		"path": "../../.."
-	},
-	{
-		"path": "../../../../internal-profile-app"
-	},
-	{
-		"path": "../../../../availability-gantt-chart"
-	},
-	{
-		"path": "../../../../client-portal"
-	},
-	{
-		"path": "../../../../expert-portal"
-	}
-],
-  "settings": {}
-}
+{
+  "folders": [
+	{
+		"path": "../../.."
+	},
+	{
+		"path": "../../../../internal-profile-app"
+	},
+	{
+		"path": "../../../../availability-gantt-chart"
+	},
+	{
+		"path": "../../../../client-portal"
+	},
+	{
+		"path": "../../../../expert-portal"
+	}
+],
+  "settings": {}
+}

package/lib/components/ReviewsTab/reviewRequestModal.js

@@ -34,11 +34,11 @@ const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const ReviewRequestModal = ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, getParoProjectsDocument, }) => {
     var _a;
     const [showError, setShowError] = (0, react_1.useState)(false);
-    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
-I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
-  
-Thank you in advance for your time and feedback.
-Best regards,
+    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
+I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
+  
+Thank you in advance for your time and feedback.
+Best regards,
 ${expertName}`);
     const handleTextArea = (e) => {
         setTextareaValue(e.target.value);

package/lib/components/ServiceLinesTemplate/index.js

@@ -43,9 +43,10 @@ const react_hot_toast_1 = require("react-hot-toast");
 const CustomTextField = (0, core_1.withStyles)({
     root: {
         '& .MuiOutlinedInput-input': {
-            width: '40px',
-            padding: '12px 6px !important',
+            width: '20px',
+            padding: '6px !important',
             fontFamily: 'Roboto',
+            fontSize: '14px',
         },
     },
 })(core_1.TextField);
@@ -265,10 +266,15 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
     const handleChangeTitle = (event) => {
         setSelectedTitle(event.target.value);
     };
-    const ActionButtons = (disabled) => {
+    const ActionButtons = (handleUpdateProfile) => {
+        const handleButtonClick = (e) => {
+            e.preventDefault();
+            isInternalProfile ? handleUpdateProfile() : handleUpdateExpertTitle();
+            setDisablePublicProfile(false);
+        };
         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" }));
+            react_1.default.createElement(base_ui_1.Button, { label: "PREVIEW PUBLIC PROFILE", onClick: () => window.open(`${reactAppUrl}/public/${legacyFreelancerId}`, '_blank'), type: "button", disabled: disablePublicProfile, isLoading: updateClicked, size: "sm" }),
+            react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleButtonClick, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary", size: "sm" }));
     };
     const newServiceLine = () => {
         var _a, _b;
@@ -278,7 +284,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                     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")),
+                            !isInternalProfile && 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")),
                         !isInternalProfile && 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 ",
@@ -317,7 +323,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                             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' },
                                     react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center' },
                                         react_1.default.createElement(CustomCheckbox, { checked: serviceExistsInArray && serviceExistsInArray.selected, disabled: serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, onChange: () => {
                                                 if (serviceExistsInArray) {
@@ -333,10 +339,11 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                                                 }
                                             } })),
                                     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', justifyContent: 'space-between' },
                                             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,
+                                                    react_1.default.createElement("br", null),
                                                     (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(CustomTextField, { size: "small", variant: "outlined", value: (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.rate) || '', onChange: (e) => {
@@ -352,8 +359,8 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                                                             handlePriceChange(service.title, e.target.value ? parseInt(e.target.value) : 0, serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, (_c = serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.selected) !== null && _c !== void 0 ? _c : false);
                                                         }
                                                     }, InputProps: {
-                                                        startAdornment: react_1.default.createElement(core_1.Typography, null, "$\u00A0"),
-                                                        endAdornment: react_1.default.createElement(core_1.Typography, null, "\u00A0/hr"),
+                                                        startAdornment: react_1.default.createElement(core_1.Typography, { variant: "caption" }, "$\u00A0"),
+                                                        endAdornment: react_1.default.createElement(core_1.Typography, { variant: "caption" }, "\u00A0/hr"),
                                                     }, required: serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.selected, error: serviceExistsInArray && !serviceExistsInArray.rate, label: "Rate" }),
                                                 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: 3, width: '70%' },
@@ -401,13 +408,13 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                                     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%' } },
+                            selectedTitle === 'Other' && react_1.default.createElement(core_1.Grid, { item: true, style: { width: '50%' } },
                                 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("div", { style: { marginTop: '20px' } }, ActionButtons(handleUpdateProfile))
                 :
                     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" }))));
+                        react_1.default.createElement(base_ui_1.Button, { label: "NEXT", onClick: () => handleUpdateProfile(), type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary", size: "sm" }))));
     };
     if (loading) {
         return (react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", width: '100%', style: { margin: 'auto' } },

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;