@paro.io/expert-shared-components 1.7.1 → 1.7.3

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.d.ts

@@ -5,6 +5,8 @@ interface ActionButtonSectionProps {
     setOpenAssessmentModal: (openAssessmentModal: boolean) => void;
     createExpertPublicProfileTrackingRecord: () => void;
     lifetimeFSV: number;
+    openServiceLinesTemplate?: boolean;
+    setOpenServiceLinesTemplate: (openServiceLinesTemplate: boolean) => void;
 }
-declare const ActionButtonsSection: ({ isWhiteLabel, applicationStatus, publicProfileLink, setOpenAssessmentModal, createExpertPublicProfileTrackingRecord, lifetimeFSV }: ActionButtonSectionProps) => JSX.Element;
+declare const ActionButtonsSection: ({ isWhiteLabel, applicationStatus, publicProfileLink, setOpenAssessmentModal, setOpenServiceLinesTemplate, createExpertPublicProfileTrackingRecord, lifetimeFSV, openServiceLinesTemplate }: ActionButtonSectionProps) => JSX.Element;
 export default ActionButtonsSection;

package/lib/components/ExpertProfileHeader/ActionButtonSection.js

@@ -10,19 +10,25 @@ const react_1 = __importDefault(require("react"));
 const CopyToClipboardAlert_1 = __importDefault(require("../shared/CopyToClipboardAlert"));
 const colors_1 = __importDefault(require("../ClientReferencesSection/constants/colors"));
 const Banner_1 = __importDefault(require("./Banner"));
-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 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 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 },
         react_1.default.createElement(Icon, null))));
-const ActionButtonsSection = ({ isWhiteLabel, applicationStatus, publicProfileLink, setOpenAssessmentModal, createExpertPublicProfileTrackingRecord, lifetimeFSV }) => {
+const ActionButtonsSection = ({ isWhiteLabel, applicationStatus, publicProfileLink, setOpenAssessmentModal, setOpenServiceLinesTemplate, createExpertPublicProfileTrackingRecord, lifetimeFSV, openServiceLinesTemplate }) => {
     return (react_1.default.createElement(core_1.Box, { style: { display: 'flex', justifyContent: 'flex-end', marginTop: '10px', alignItems: 'center' } },
         (lifetimeFSV && lifetimeFSV >= 85000) ? react_1.default.createElement(Banner_1.default, { lifetimeFSV: lifetimeFSV }) : '',
+        react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Service Lines" },
+            react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenServiceLinesTemplate(true) },
+                " ",
+                react_1.default.createElement(base_icons_1.IconBriefcase, { size: "md" }),
+                " ")),
         isWhiteLabel && applicationStatus === 'ACTIVE' && (react_1.default.createElement(ActionButton, { title: "Send Assessment", ariaLabel: "send assessment", onClick: () => setOpenAssessmentModal(true), icon: icons_1.Send })),
         react_1.default.createElement(CopyToClipboardAlert_1.default, { alertMessage: "Public profile copied to clipboard", title: "Copy public profile link", button: StyledButton, buttonContent: "", copyContent: publicProfileLink, icon: true, mutationToInvoke: createExpertPublicProfileTrackingRecord, iconButton: true })));
 };

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

@@ -14,6 +14,8 @@ type SectionContents = {
     paroAppUrl: string;
     isExpertOps?: boolean;
     internalUserId?: number;
+    openServiceLinesTemplate?: boolean;
+    setOpenServiceLinesTemplate: (openServiceLinesTemplate: boolean) => void;
 };
 type QueryAndMutationProps = {
     getExpertByLegacyFreelancerIdDocument?: any;
@@ -71,5 +73,5 @@ type ProfileCompletedPercentageProps = {
     detailsSectionCompleted: boolean;
     handleScrollToBottom?: () => void;
 };
-export declare const ExpertProfileHeader: ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
+export declare const ExpertProfileHeader: ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
 export {};

package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js

@@ -75,7 +75,7 @@ const convertRegionToStateAbbreviation = (region) => {
 const personalInformationReducer = (state, updatedState) => {
     return Object.assign(Object.assign({}, state), updatedState);
 };
-const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, }) => {
+const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const [leftSideStatus, setLeftSideStatus] = react_1.default.useState("");
     const [rightSideStatus, setRightSideStatus] = react_1.default.useState("");
@@ -210,7 +210,7 @@ const ExpertProfileHeader = ({ expertId, address: addressForReducer, companyName
                     react_1.default.createElement(core_1.Typography, { variant: 'h5' },
                         react_1.default.createElement("b", null, "Personal Information"))),
                 isInternal && react_1.default.createElement(core_1.Grid, { item: true },
-                    react_1.default.createElement(ActionButtonSection_1.default, { isWhiteLabel: isWhiteLabel, applicationStatus: applicationStatus, publicProfileLink: publicProfileLink, setOpenAssessmentModal: setOpenAssessmentModal, createExpertPublicProfileTrackingRecord: createExpertPublicProfileTrackingRecord, lifetimeFSV: lifetimeFSV !== null && lifetimeFSV !== void 0 ? lifetimeFSV : 0 }))),
+                    react_1.default.createElement(ActionButtonSection_1.default, { isWhiteLabel: isWhiteLabel, applicationStatus: applicationStatus, publicProfileLink: publicProfileLink, setOpenAssessmentModal: setOpenAssessmentModal, createExpertPublicProfileTrackingRecord: createExpertPublicProfileTrackingRecord, lifetimeFSV: lifetimeFSV !== null && lifetimeFSV !== void 0 ? lifetimeFSV : 0, openServiceLinesTemplate: openServiceLinesTemplate, setOpenServiceLinesTemplate: setOpenServiceLinesTemplate }))),
             react_1.default.createElement(CustomPaper, { style: { minHeight: 'min-content', maxHeight: '60vh', overflow: 'auto', borderBottom: '1px solid #c1c1c1' }, className: 'personalInfo' },
                 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' } },

package/lib/components/ExpertProfileHeader/NetworkSection.js

@@ -25,10 +25,10 @@ const StatusItem = ({ label, status, successText, warningText }) => {
         react_1.default.createElement("b", { className: status ? classes.textSuccess : classes.textWarning }, status ? successText : warningText)));
 };
 const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal }) => {
-    return (react_1.default.createElement(core_1.Grid, { item: true, style: { width: '100%', padding: '6px 0px 6px 0px' } },
+    return (react_1.default.createElement(core_1.Grid, { item: true, style: { width: '100%', padding: '6px 0px 6px 0px', zIndex: 1 } },
         react_1.default.createElement(core_1.Grid, { style: { paddingLeft: '10px' } },
             react_1.default.createElement("b", null, "Profile"),
-            react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-start', cursor: 'pointer', width: 'full', marginBottom: '6px' }, onClick: handleScrollToBottom },
+            react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-start', cursor: 'pointer', width: 'full', marginBottom: '6px', zIndex: 1 }, onClick: handleScrollToBottom },
                 react_1.default.createElement(ProfileCompletedPercentange_1.ProfileCompletedPercentage, { preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted }))),
         react_1.default.createElement(core_1.Box, { mt: 4, mb: 2, mr: 2 },
             react_1.default.createElement(core_1.Divider, null)),

package/lib/components/ExpertProfileHeader/ProfileSection.js

@@ -53,13 +53,13 @@ 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, paroTenure, hourlyRate, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, }) => {
     var _a;

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

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

package/lib/components/HeaderNavBar/index.js

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

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.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type ServiceLinesTemplateProps = {
+    getFreelancerDataResult?: any;
+    createOrUpdateRates?: any;
+    updateExpert?: any;
+    openServiceLinesTemplate?: boolean;
+    setOpenServiceLinesTemplate?: any;
+    getRatesByExpertId?: any;
+    setView?: any;
+    getServiceLines?: any;
+    legacyFreelancerId?: any;
+    expertId?: any;
+    isFirmProfile?: boolean;
+    serviceLineData?: any;
+    selectedServicesList?: any;
+    servicePricesList?: any;
+    isInternalProfile?: boolean;
+    updateFreelancerPreferences?: any;
+};
+export declare const ServiceLinesTemplate: ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList, isInternalProfile, updateFreelancerPreferences, }: ServiceLinesTemplateProps) => false | React.JSX.Element | undefined;
+export {};

package/lib/components/ServiceLinesTemplate/index.js

@@ -0,0 +1,231 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceLinesTemplate = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+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 ServiceLinesTemplate = ({ getFreelancerDataResult, createOrUpdateRates, getRatesByExpertId, updateExpert, openServiceLinesTemplate, setOpenServiceLinesTemplate, getServiceLines, legacyFreelancerId, expertId, isFirmProfile, serviceLineData, selectedServicesList = [], isInternalProfile = false, updateFreelancerPreferences, }) => {
+    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 [serviceLines, setServiceLines] = (0, react_1.useState)(serviceLineData);
+    const [currentServiveRate, setCurrentServiceRate] = (0, react_1.useState)(null);
+    const fetchServiceLineData = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        try {
+            setLoading(true);
+            const [freelancerResponse, serviceLinesResponse, ratesResponse] = yield Promise.all([
+                getFreelancerDataResult({ variables: { legacyFreelancerId: legacyFreelancerId }, skip: !legacyFreelancerId, fetchPolicy: 'network-only' }),
+                getServiceLines({ fetchPolicy: 'network-only', }),
+                getRatesByExpertId({ variables: { expertId }, skip: !expertId, fetchPolicy: 'network-only' }),
+            ]);
+            setServiceLines(((_a = serviceLinesResponse === null || serviceLinesResponse === void 0 ? void 0 : serviceLinesResponse.data) === null || _a === void 0 ? void 0 : _a.getServiceLines) || serviceLineData);
+            const currentService = (_d = (_c = (_b = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _b === void 0 ? void 0 : _b.getExpertByLegacyFreelancerId) === null || _c === void 0 ? void 0 : _c.legacyMetadata) === null || _d === void 0 ? void 0 : _d.primaryServiceLine;
+            const currentRate = (_g = (_f = (_e = freelancerResponse === null || freelancerResponse === void 0 ? void 0 : freelancerResponse.data) === null || _e === void 0 ? void 0 : _e.getExpertByLegacyFreelancerId) === null || _f === void 0 ? void 0 : _f.legacyMetadata) === null || _g === void 0 ? void 0 : _g.defaultHourlyRate;
+            const expertRates = (_h = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.data) === null || _h === void 0 ? void 0 : _h.getRatesByExpertId;
+            setCurrentServiceRate(currentRate);
+            dispatch({
+                currentService,
+                currentRate,
+                expertRates,
+                type: 'populate'
+            });
+        }
+        catch (error) {
+            console.error("Error fetching service line data:", error);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (openServiceLinesTemplate && !isInternalProfile) {
+            fetchServiceLineData();
+        }
+    }, [openServiceLinesTemplate]);
+    const handlePriceChange = (serviceTitle, newPrice, currentService) => {
+        dispatch({
+            serviceTitle,
+            newPrice,
+            currentService,
+            type: 'price-change'
+        });
+    };
+    const services = serviceLines === null || serviceLines === void 0 ? void 0 : serviceLines.map((title) => {
+        return {
+            title: utils_1.titleMappings[title] || title,
+            description: utils_1.serviceDescriptions[utils_1.titleMappings[title]] || '',
+        };
+    });
+    const updateFreelancerPreferencesFn = (rate) => {
+        updateFreelancerPreferences({
+            variables: {
+                freelancerId: legacyFreelancerId,
+                input: {
+                    freelancerRate: rate,
+                    clientRate: rate * 2,
+                },
+            },
+        });
+    };
+    const handleUpdateProfile = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setUpdateClicked(true);
+            const ratesInput = {
+                rates: selectedServices.map((service) => ({
+                    serviceLine: service.service,
+                    rate: Number(service.rate),
+                })),
+            };
+            const isCurrentRateUpdated = selectedServices.filter((service) => service.currentService === true);
+            if (isCurrentRateUpdated.length > 0 && isCurrentRateUpdated[0].rate !== currentServiveRate) {
+                yield updateFreelancerPreferencesFn(Number(isCurrentRateUpdated[0].rate));
+            }
+            yield createOrUpdateRates({
+                variables: {
+                    expertId: expertId,
+                    isFirmProfile: isFirmProfile === true,
+                    input: ratesInput,
+                },
+            });
+            updateFeatureStatus();
+            fetchServiceLineData();
+        }
+        catch (error) {
+            console.log('DB Updation failed: ', error.message);
+        }
+        finally {
+            setOpenServiceLinesTemplate && setOpenServiceLinesTemplate(false);
+        }
+        ;
+    });
+    const updateFeatureStatus = () => {
+        updateExpert({
+            variables: {
+                expertId: expertId,
+                input: {
+                    featureStatus: { "serviceLines": true }
+                }
+            },
+        }).then(() => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'success',
+                message: 'Updated successfully!',
+                icon: 'success',
+            });
+        }).catch((error) => {
+            (0, ReviewsTab_1.toastNotification)({
+                position: 'top-center',
+                color: 'warning',
+                message: 'Update failed!',
+                icon: 'warning'
+            });
+            console.log('DB Updation failed : ', error.message);
+        }).finally(() => {
+            setOpenServiceLinesTemplate && setOpenServiceLinesTemplate(false);
+        });
+    };
+    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;
+        return selectedServices.some((service) => !service.service || service.rate === 0);
+    };
+    const CustomCheckbox = (0, core_1.withStyles)({
+        root: {
+            color: "#378284",
+            "&$checked": {
+                color: "#378284",
+            },
+            "&.Mui-disabled.Mui-checked": {
+                color: "#9e9e9e", // Grey color when both disabled and checked
+            },
+        },
+        checked: {},
+    })((props) => react_1.default.createElement(core_1.Checkbox, Object.assign({ color: "default" }, props)));
+    const handleServiceToggle = (service) => {
+        dispatch({
+            service,
+            type: 'update'
+        });
+    };
+    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,
+        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 } },
+                    react_1.default.createElement(core_1.Box, { sx: { display: "flex", justifyContent: "space-evenly", mt: 4 } },
+                        react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateProfile, type: "button", disabled: isUpdateButtonDisabled(), color: "primary" }),
+                        react_1.default.createElement(base_ui_1.Button, { label: "NOT INTERESTED", onClick: handleNotInterestedClick, type: "button", disabled: updateClicked }))))))))));
+};
+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;