@paro.io/expert-shared-components 1.9.1 → 1.9.3

package/lib/components/OrganizationChart/utils.d.ts

@@ -0,0 +1,39 @@
+import { Card } from '@material-ui/core';
+type Employee = {
+    id: number;
+    employeeName: string;
+    yearsWithFirm: number;
+    firmRole: string;
+    employeeLocation: string;
+    level: number;
+    expertFirmId: string;
+    directReport: string;
+    __typename: string;
+};
+type TransformedEmployee = {
+    name: string;
+    position: string;
+    experience: number;
+    location: string;
+    initial: string;
+    level: number | null;
+    children: TransformedEmployee[];
+};
+export declare const transformEmployeeData: (employeeData: Employee[], firstName: string, lastName: string, primaryServiceLine: string, city: string, stateAbbreviation: string, paroTenure: number) => {
+    name: string;
+    position: string;
+    experience: number;
+    location: string;
+    initial: string;
+    level: number;
+    children: TransformedEmployee[];
+};
+export declare const ConnectorContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoCard: import("styled-components").StyledComponent<typeof Card, any, {}, never>;
+export declare const CustomDialog: import("react").ComponentType<Pick<import("@material-ui/core").DialogProps, "id" | "open" | "color" | "container" | "content" | "maxWidth" | "transitionDuration" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "scroll" | "rel" | "accessKey" | "draggable" | "lang" | "prefix" | "role" | "children" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "ref" | "suppressHydrationWarning" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "onClose" | "innerRef" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "fullWidth" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableBackdropClick" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "manager" | "onBackdropClick" | "onEscapeKeyDown" | "onRendered" | "PaperProps" | "TransitionComponent" | "TransitionProps" | "PaperComponent" | "fullScreen"> & import("@material-ui/core").StyledComponentProps<"root"> & {
+    className?: string;
+}>;
+export declare const parseServices: (services: string[]) => object[];
+export declare const checkEmployeeLocation: (data: any[]) => "none" | "Offshore & Onshore Team" | "Offshore Team" | "Onshore Team";
+export declare const getTotalYearsWithFirm: (data: any[]) => any;
+export {};

package/lib/components/OrganizationChart/utils.js

@@ -0,0 +1,233 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTotalYearsWithFirm = exports.checkEmployeeLocation = exports.parseServices = exports.CustomDialog = exports.InfoCard = exports.ConnectorContainer = exports.transformEmployeeData = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("@material-ui/core");
+const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
+// export const transformEmployeeData = (
+//     employeeData: Employee[],
+//     firstName: string,
+//     lastName: string,
+//     primaryServiceLine: string,
+//     city: string,
+//     stateAbbreviation: string,
+//     paroTenure: number
+//   ) => {
+//     const getInitial = (name: string): string => name.charAt(0).toUpperCase();
+//     // // Organize employees by their level
+//     // const levels: { [key: number]: Employee[] } = {};
+//     // employeeData.forEach((employee) => {
+//     //   if (!levels[employee.level]) {
+//     //     levels[employee.level] = [];
+//     //   }
+//     //   levels[employee.level].push(employee);
+//     // });
+//     const buildHierarchy = (parent: Employee | null, level: number): TransformedEmployee[] => {
+//     //   if (!levels[level]) return [];
+//       // Filter employees based on matching direct_report and expert_firm_id with the parent
+//       const children = employeeData.filter((employee) => {
+//         return (parent === null || 
+//                 (employee.directReport === parent.employeeName && 
+//                  employee.expertFirmId === parent.expertFirmId));
+//       }).map((employee) => ({
+//         name: employee.employeeName,
+//         position: employee.firmRole,
+//         experience: employee.yearsWithFirm,
+//         location: employee.employeeLocation,
+//         initial: getInitial(employee.employeeName),
+//         level: level,
+//         children: buildHierarchy(employee, level + 1),  // Recursive call to get the next level of children
+//       }));
+//       return children;
+//     };
+//     // Start building hierarchy from level 1 (assuming the top-most level is level 1)
+//     const transformedData = buildHierarchy(null, 1);
+//     return {
+//       name: `${firstName} ${lastName}`,
+//       position: primaryServiceLine,
+//       experience: paroTenure,
+//       location: `${city}, ${stateAbbreviation}`,
+//       initial: firstName.charAt(0).toUpperCase(),
+//       level: 0,
+//       children: transformedData,
+//     };
+// };
+const transformEmployeeData = (employeeData, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure) => {
+    const getInitial = (name) => name.charAt(0).toUpperCase();
+    const buildHierarchy = (parent) => {
+        if (parent === null) {
+            return employeeData.filter(employee => employee.level === 1)
+                .map(employee => ({
+                name: employee.employeeName,
+                position: employee.firmRole,
+                experience: employee.yearsWithFirm,
+                location: employee.employeeLocation,
+                initial: getInitial(employee.employeeName),
+                level: 1, // Top level employees (level 1)
+                children: buildHierarchy(employee), // Recursive call for next levels
+            }));
+        }
+        // Filter employees based on matching direct_report and expert_firm_id with the parent
+        return employeeData.filter((employee) => {
+            return (parent === null ||
+                (employee.directReport === parent.employeeName &&
+                    employee.expertFirmId === parent.expertFirmId));
+        }).map((employee) => ({
+            name: employee.employeeName,
+            position: employee.firmRole,
+            experience: employee.yearsWithFirm,
+            location: employee.employeeLocation,
+            initial: getInitial(employee.employeeName),
+            level: parent ? parent.level + 1 : 1, // Set level based on parent
+            children: buildHierarchy(employee), // Recursive call to get the next level of children
+        }));
+    };
+    // Start building hierarchy from null (the root level)
+    const transformedData = buildHierarchy(null);
+    return {
+        name: `${firstName} ${lastName}`,
+        position: primaryServiceLine,
+        experience: paroTenure,
+        location: `${city}, ${stateAbbreviation}`,
+        initial: firstName.charAt(0).toUpperCase(),
+        level: 0,
+        children: transformedData,
+    };
+};
+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.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': {
+        backgroundColor: '#060821',
+        width: '90vw',
+        maxWidth: '90vw',
+        height: '90vh',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        [theme.breakpoints.down('md')]: {
+            width: '100vw',
+            maxWidth: '100vw',
+        },
+    }
+}));
+const parseServices = (services) => {
+    var _a;
+    const uniqueArray = (_a = Array.from(new Set(services === null || services === void 0 ? void 0 : services.map(item => JSON.stringify(item))))) === null || _a === void 0 ? void 0 : _a.map(str => JSON.parse(str));
+    return uniqueArray;
+};
+exports.parseServices = parseServices;
+const checkEmployeeLocation = (data) => {
+    let hasOffshore = false;
+    let hasOnshore = false;
+    data === null || data === void 0 ? void 0 : data.forEach(employee => {
+        var _a;
+        const location = (_a = employee === null || employee === void 0 ? void 0 : employee.employeeLocation) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (location === null || location === void 0 ? void 0 : location.includes("offshore")) {
+            hasOffshore = true;
+        }
+        if (location === null || location === void 0 ? void 0 : location.includes("onshore")) {
+            hasOnshore = true;
+        }
+    });
+    if (hasOffshore && hasOnshore) {
+        return "Offshore & Onshore Team";
+    }
+    else if (hasOffshore) {
+        return "Offshore Team";
+    }
+    else if (hasOnshore) {
+        return "Onshore Team";
+    }
+    else {
+        return "none";
+    }
+};
+exports.checkEmployeeLocation = checkEmployeeLocation;
+const getTotalYearsWithFirm = (data) => {
+    return data === null || data === void 0 ? void 0 : data.reduce((total, employee) => total + employee.yearsWithFirm, 0);
+};
+exports.getTotalYearsWithFirm = getTotalYearsWithFirm;

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

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

package/lib/components/shared/Error.js

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

package/lib/components/shared/Image.js

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

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

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

package/lib/components/shared/ProfileTextField.js

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

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

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

package/lib/components/shared/StyledActionButtons.js

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