@paro.io/expert-shared-components 1.10.8 → 1.11.0

package/lib/components/OrganizationChart/PersonCard.js

@@ -7,11 +7,11 @@ const react_1 = __importDefault(require("react"));
 const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
     react_1.default.createElement("div", { className: "flex flex-col items-center" },
         react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
-            react_1.default.createElement("div", { className: `
-                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
-                        text-white font-semibold text-lg
-                        transition-all duration-200 hover:bg-[#102377]
-                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
+            react_1.default.createElement("div", { className: `
+                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
+                        text-white font-semibold text-lg
+                        transition-all duration-200 hover:bg-[#102377]
+                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
                     ` },
                 initial,
                 noOfchildren > 0 && (react_1.default.createElement("div", { className: "absolute -bottom-3 w-6 h-6 rounded bg-gray-400 flex items-center justify-center text-white text-sm" }, noOfchildren)))),

package/lib/components/OrganizationChart/utils.js

@@ -50,86 +50,86 @@ const transformEmployeeData = (employeeData, firstName, lastName, primaryService
     };
 };
 exports.transformEmployeeData = transformEmployeeData;
-exports.ConnectorContainer = styled_components_1.default.div `
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.parent-vertical-line {
-        height: 40px;
-        position: relative;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: calc(100% + 2px);
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-    }
-
-    &.child-vertical-line {
-        height: 40px;
-        position: relative;
-        margin-bottom: 4px;
-        &:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 50%;
-            width: 8px;
-            height: 8px;
-            border-right: 2px solid #D8D8D8;
-            border-bottom: 2px solid #D8D8D8;
-            transform: translateX(-50%) rotate(45deg);
-            background-color: transparent;
-        }
-    }
-
-    &.horizontal-line {
-        position: absolute;
-        height: 2px;
-        background-color: #D8D8D8;
-        top: 0;
-        width: 100%;
-    }
+exports.ConnectorContainer = styled_components_1.default.div `
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.parent-vertical-line {
+        height: 40px;
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: calc(100% + 2px);
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+    }
+
+    &.child-vertical-line {
+        height: 40px;
+        position: relative;
+        margin-bottom: 4px;
+        &:before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid #D8D8D8;
+            border-bottom: 2px solid #D8D8D8;
+            transform: translateX(-50%) rotate(45deg);
+            background-color: transparent;
+        }
+    }
+
+    &.horizontal-line {
+        position: absolute;
+        height: 2px;
+        background-color: #D8D8D8;
+        top: 0;
+        width: 100%;
+    }
 `;
-exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
-    position: absolute;
-    top: 10;
-    right: 0;
-    width: fit-content;
-    max-width: 30%;
-    z-index: 1000;
-    padding: 8px;
-    margin: 16px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: none;
-    border: 1px solid #e2e8f0;
-    max-height: 90vh;
-    overflow: auto;
-    @media (max-width: 600px) {
-        position: absolute;
-        top: 20;
-        right: auto;
-        min-width: 90%;
-    }
+exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
+    position: absolute;
+    top: 10;
+    right: 0;
+    width: fit-content;
+    max-width: 30%;
+    z-index: 1000;
+    padding: 8px;
+    margin: 16px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    max-height: 90vh;
+    overflow: auto;
+    @media (max-width: 600px) {
+        position: absolute;
+        top: 20;
+        right: auto;
+        min-width: 90%;
+    }
 `;
 exports.CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
     '& .MuiDialog-paper': {

package/lib/components/ProjectCard/LeftCardUI.js

@@ -158,7 +158,7 @@ const LeftCardUI = ({ projectData, projectRateType, projectFrequencyType, projec
             clientPortal && react_1.default.createElement("div", { className: "flex flex-row justify-between" },
                 react_1.default.createElement("p", null,
                     "Client Rate ",
-                    projectFrequencyType === "Recurring" && "Per Hour"),
+                    projectRateType !== "Fixed" && "Per Hour"),
                 react_1.default.createElement("p", null,
                     "$ ",
                     (0, ProgressBar_1.formatNumberingSystem)(payRate * 2))),

package/lib/components/ProjectCard/ProgressBar.js

@@ -44,15 +44,15 @@ const ProgressBar = ({ minFloorHours, maxFloorHours, loggedHours }) => {
     };
     return (react_1.default.createElement("div", { className: `relative m-6 ${minFloorHours <= 0 ? 'pt-4' : 'pt-6'}` },
         react_1.default.createElement("div", { className: "h-8 w-full border-2 border-solid border-[#64748B] rounded-full relative flex flex-wrap bg-[#F1F5F9]" },
-            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
+            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
                             ${totalLoggedHours >= minFloorHours && totalLoggedHours <= maxFloorHours
                     ? 'bg-[#248384]'
                     : totalLoggedHours < minFloorHours
                         ? 'bg-[#F9BABF]'
                         : 'bg-[#A73A43]'}`, style: { width: `${totalLoggedHours !== 0 ? ((totalLoggedHours / totalBar) * 100) : 0}%` } },
-                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
-                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
-                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
+                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
+                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
+                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
                             font-bold`, style: { left: `calc(${calculatePosition()}% - 1px)` } },
                     (0, exports.formatNumberingSystem)(totalLoggedHours),
                     " hrs")),

package/lib/components/ProjectCard/ReviewRequestModal.js

@@ -35,11 +35,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, }) => {
     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 [loading, setLoading] = (0, react_1.useState)(false);
     const handleTextArea = (e) => {

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/shared/Image.js

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

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

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

package/lib/components/shared/ProfileTextField.js

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

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

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

package/lib/components/shared/StyledActionButtons.js

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

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

@@ -1,10 +1,10 @@
-import React from 'react';
-interface ToastModalProps {
-    color: 'success' | 'info' | 'warning' | 'danger';
-    icon: string;
-    message: string;
-    duration?: number;
-    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
-}
-declare const ToastModal: React.FC<ToastModalProps>;
-export default ToastModal;
+import React from 'react';
+interface ToastModalProps {
+    color: 'success' | 'info' | 'warning' | 'danger';
+    icon: string;
+    message: string;
+    duration?: number;
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
+}
+declare const ToastModal: React.FC<ToastModalProps>;
+export default ToastModal;