npm - @paro.io/expert-shared-components - Versions diffs - 1.8.7 → 1.8.9 - Mend

@paro.io/expert-shared-components 1.8.7 → 1.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, 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(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(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 CHANGED Viewed

@@ -13,8 +13,6 @@ interface ProfileSectionProps {
     stateAbbreviation: string;
     email: string;
     phone: any;
-    paroTenure: string;
-    hourlyRate: number;
     setOpen: (open: boolean) => void;
     paroProjectsData: any;
     getUserDocument?: any;
@@ -30,5 +28,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, paroTenure, hourlyRate, }: 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, }: ProfileSectionProps) => JSX.Element;
 export default ProfileSection;

package/lib/components/ExpertProfileHeader/ProfileSection.js CHANGED Viewed

@@ -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, paroTenure, hourlyRate, }) => {
+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, }) => {
     var _a;
     const [openReviews, setOpenReviews] = (0, react_1.useState)(false);
     const [resetPasswordOpen, setResetPasswordOpen] = (0, react_1.useState)(false);
@@ -121,30 +121,20 @@ 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.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.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, { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
@@ -116,11 +117,12 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
             setLoading(false);
         }
     }, [openServiceLinesTemplate]);
-    const handlePriceChange = (serviceTitle, newPrice, currentService) => {
+    const handlePriceChange = (serviceTitle, newPrice, currentService, selected) => {
         dispatch({
             serviceTitle,
             newPrice,
             currentService,
+            selected,
             type: 'price-change'
         });
     };
@@ -170,10 +172,11 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
         });
     });
     const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         try {
             setUpdateClicked(true);
             const ratesInput = {
-                rates: selectedServices.map((service) => ({
+                rates: (_a = selectedServices.filter((service) => { return service.selected; })) === null || _a === void 0 ? void 0 : _a.map((service) => ({
                     serviceLine: service.service,
                     rate: Number(service.rate),
                 })),
@@ -232,7 +235,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
     const isUpdateButtonDisabled = () => {
         if ((selectedServices === null || selectedServices === void 0 ? void 0 : selectedServices.length) === 0)
             return true;
-        return selectedServices.some((service) => !service.service || service.rate === 0);
+        return selectedServices.some((service) => !service.service || service.rate === 0 || service.selected === false);
     };
     const CustomCheckbox = (0, core_1.withStyles)({
         root: {
@@ -246,22 +249,30 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
         },
         checked: {},
     })((props) => react_1.default.createElement(core_1.Checkbox, Object.assign({ color: "default" }, props)));
-    const handleServiceToggle = (service) => {
+    const handleServiceToggle = (service, selected, rate = 0) => {
         dispatch({
             service,
+            selected,
+            rate,
             type: 'update'
         });
     };
+    const handleRemoveService = (service) => {
+        dispatch({
+            service,
+            type: 'remove'
+        });
+    };
     const handleChangeTitle = (event) => {
         setSelectedTitle(event.target.value);
     };
     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" }));
+            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, size: "sm" }),
+            react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateExpertTitle, type: "button", isLoading: updateClicked, disabled: isUpdateButtonDisabled(), color: "primary", size: "sm" }));
     };
     const newServiceLine = () => {
-        var _a;
+        var _a, _b;
         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" },
@@ -276,7 +287,7 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                                 " 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: "row", justifyContent: "space-between", alignItems: "center", style: { margin: 'auto' } },
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justifyContent: "space-between", alignItems: "center", style: { marginLeft: '10px', marginRight: '10px' } },
                         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,
@@ -293,26 +304,61 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                             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) => {
+                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justifyContent: "space-evenly", alignItems: "center" }, (_a = services === null || services === void 0 ? void 0 : services.sort((a, b) => {
+                            const aExists = selectedServices.find((svc) => svc.service === a.title);
+                            const bExists = selectedServices.find((svc) => svc.service === b.title);
+                            const aCurrentService = aExists === null || aExists === void 0 ? void 0 : aExists.currentService;
+                            const bCurrentService = bExists === null || bExists === void 0 ? void 0 : bExists.currentService;
+                            if (aCurrentService && !bCurrentService)
+                                return -1;
+                            if (!aCurrentService && bCurrentService)
+                                return 1;
+                            return 0;
+                        })) === null || _a === void 0 ? void 0 : _a.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(CustomCheckbox, { checked: serviceExistsInArray && serviceExistsInArray.selected, disabled: serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, onChange: () => {
+                                                if (serviceExistsInArray) {
+                                                    if (serviceExistsInArray.selected) {
+                                                        handleRemoveService(service.title);
+                                                    }
+                                                    else {
+                                                        handleServiceToggle(service.title, !!serviceExistsInArray.selected, serviceExistsInArray.rate);
+                                                    }
+                                                }
+                                                else {
+                                                    handleServiceToggle(service.title, true);
+                                                }
+                                            } })),
                                     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,
+                                                    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) => 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"),
-                                                    }, required: serviceExistsInArray, error: serviceExistsInArray && !serviceExistsInArray.rate, label: "Rate" }),
+                                                react_1.default.createElement(CustomTextField, { size: "small", variant: "outlined", value: (serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.rate) || '', onChange: (e) => {
+                                                        var _a, _b, _c;
+                                                        if (serviceExistsInArray) {
+                                                            if (e.target.value === '' && !serviceExistsInArray.selected) {
+                                                                handleRemoveService(service.title);
+                                                            }
+                                                            handlePriceChange(service.title, e.target.value ? parseInt(e.target.value) : 0, serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.currentService, (_a = serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.selected) !== null && _a !== void 0 ? _a : false);
+                                                        }
+                                                        else {
+                                                            handleServiceToggle(service.title, (_b = serviceExistsInArray === null || serviceExistsInArray === void 0 ? void 0 : serviceExistsInArray.selected) !== null && _b !== void 0 ? _b : false, e.target.value ? parseInt(e.target.value) : 0);
+                                                            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, { 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: 2 },
+                                isExpanded && react_1.default.createElement(core_1.Box, { ml: 3, width: '70%' },
                                     react_1.default.createElement(core_1.Typography, { variant: "caption", style: { fontWeight: 400, fontSize: '12px', fontFamily: "Roboto" } }, service.description))));
                         }))))
                 :
@@ -351,19 +397,19 @@ const ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, ge
                             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 },
+                                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 : (_b = titleOptions[0]) === null || _b === void 0 ? void 0 : _b.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%' } },
+                            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(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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;