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

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

@@ -16,6 +16,9 @@ interface DocumentUploadProps {
     error?: string | null;
     clientAndProjectsList?: any[];
     uploadExpertClientFiles?: any;
+    uploadInternalFile?: any;
+    foldername?: string;
+    insuranceExpiryDate?: any;
     refetchFiles?: any;
     legacyFreelancerId?: any;
     freelancerName?: string;
@@ -23,5 +26,5 @@ interface DocumentUploadProps {
     isClientPortal?: boolean;
     documentUploadUrl?: string;
 }
-export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal, documentUploadUrl, }: DocumentUploadProps) => JSX.Element;
+export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, insuranceExpiryDate, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal, documentUploadUrl, }: DocumentUploadProps) => JSX.Element;
 export {};

package/lib/components/DocumentCenter/DocumentUploadRow.js

@@ -78,7 +78,7 @@ const generateOptions = (array, clientOptions, isClientPortal) => {
         }
     });
 };
-const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, }) => {
+const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, insuranceExpiryDate, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, }) => {
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     const [documentName, setDocumentName] = (0, react_1.useState)('');
     const fileInputRef = (0, react_1.useRef)(null);
@@ -93,40 +93,69 @@ const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, set
     const disableButton = !(documentName && checkField) && !isUploading;
     const uploadFile = (fileForUpload, fileExtension, isLargeFile, selectedFile) => {
         var _a, _b, _c, _d, _e;
-        uploadExpertClientFiles({
-            variables: {
-                input: {
-                    clientId: (_a = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _a === void 0 ? void 0 : _a.id,
-                    clientName: (_b = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _b === void 0 ? void 0 : _b.name,
-                    email: isClientPortal ? (_c = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _c === void 0 ? void 0 : _c.name : freelancerEmail,
-                    fileName: `${documentName}.${fileExtension}`,
-                    fileSize: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size,
-                    fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[docType],
-                    freelancerId: isClientPortal ? (_d = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _d === void 0 ? void 0 : _d.id : legacyFreelancerId,
-                    freelancerName: isClientPortal ? (_e = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _e === void 0 ? void 0 : _e.name : freelancerName,
-                    projectId: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.id,
-                    projectName: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.name,
-                    uploadedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
-                    data: isLargeFile ? "" : fileForUpload,
-                },
-            }
-        })
-            .then((res) => {
-            var _a;
-            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadExpertClientFilesData) {
-                refetchFiles();
-                (0, utils_1.showToast)('success', 'File Uploaded successfully!');
-            }
-            else {
+        paroDocuments ?
+            uploadInternalFile({
+                variables: {
+                    input: {
+                        foldername,
+                        subfolder: docType,
+                        filename: `${documentName}.${fileExtension}`,
+                        data: fileForUpload,
+                        expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
+                        valid: true,
+                        sourceOfEOInsurance: 'Dashboard',
+                    },
+                }
+            }).then((res) => {
+                var _a;
+                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadFileData) {
+                    refetchFiles();
+                    (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+                }
+                else {
+                    (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+                }
+            })
+                .catch((err) => {
                 (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-            }
-        })
-            .catch((err) => {
-            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-        }).finally(() => {
-            setIsUploading(false);
-            setDocumentName('');
-        });
+            }).finally(() => {
+                setIsUploading(false);
+                setDocumentName('');
+            })
+            : uploadExpertClientFiles({
+                variables: {
+                    input: {
+                        clientId: (_a = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _a === void 0 ? void 0 : _a.id,
+                        clientName: (_b = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _b === void 0 ? void 0 : _b.name,
+                        email: isClientPortal ? (_c = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _c === void 0 ? void 0 : _c.name : freelancerEmail,
+                        fileName: `${documentName}.${fileExtension}`,
+                        fileSize: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size,
+                        fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[docType],
+                        freelancerId: isClientPortal ? (_d = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _d === void 0 ? void 0 : _d.id : legacyFreelancerId,
+                        freelancerName: isClientPortal ? (_e = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _e === void 0 ? void 0 : _e.name : freelancerName,
+                        projectId: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.id,
+                        projectName: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.name,
+                        uploadedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
+                        data: isLargeFile ? "" : fileForUpload,
+                    },
+                }
+            })
+                .then((res) => {
+                var _a;
+                if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadExpertClientFilesData) {
+                    refetchFiles();
+                    (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+                }
+                else {
+                    (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+                }
+            })
+                .catch((err) => {
+                (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+            }).finally(() => {
+                setIsUploading(false);
+                setDocumentName('');
+            });
     };
     const uploadFileRouter = (fileForUpload, fileExtension, selectedFile) => {
         setIsUploading(true);

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

@@ -4,6 +4,7 @@ interface DocumentTableProps {
     setExpiryDate: (expiryDate: string) => void;
     expertFiles: any[];
     setExpertFiles: (expertFiles: any[]) => void;
+    uploadExpertClientFiles: any;
     uploadFileData: any;
     deleteFileMutation: any;
     updateFreelancerExpiryMutation: any;

package/lib/components/DocumentCenter/ParoDocumentsTable.js

@@ -263,49 +263,6 @@ const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, exp
             setApiFoldername((_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/'));
         }
     };
-    const uploadFile = (fileForUpload, fileExtension) => {
-        setIsUploading(true);
-        uploadFileData({
-            variables: {
-                input: {
-                    foldername,
-                    subfolder: docType,
-                    filename: `${documentName}.${fileExtension}`,
-                    data: fileForUpload,
-                    expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
-                    valid: true,
-                    sourceOfEOInsurance: 'Dashboard',
-                },
-            },
-            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
-                refetchFiles(true);
-            })
-        })
-            .then(() => {
-            (0, utils_1.showToast)('success', 'File Uploaded successfully!');
-        })
-            .catch((err) => {
-            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
-        });
-        setIsUploading(false);
-        setApiFoldername('');
-        setDocumentName('');
-    };
-    const handleUpload = (event) => {
-        const selectedFile = event.target.files && event.target.files[0];
-        if (!(0, utils_1.validateFileUpload)(selectedFile, false)) {
-            return;
-        }
-        if (selectedFile) {
-            const fileExtension = selectedFile.name.substring(selectedFile.name.lastIndexOf('.') + 1);
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                const fileForUpload = String(reader.result).split(';base64,')[1];
-                uploadFile(fileForUpload, fileExtension);
-            };
-            reader.readAsDataURL(selectedFile);
-        }
-    };
     const handleDateChange = (date) => {
         if (date) {
             const currentDate = (0, date_fns_1.startOfDay)(new Date);
@@ -319,7 +276,7 @@ const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, exp
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, uploadInternalFile: uploadFileData, docType: docType, foldername: foldername, insuranceExpiryDate: insuranceExpiryDate, refetchFiles: refetchFiles, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
         react_1.default.createElement(utils_1.CustomPaper, null,
             react_1.default.createElement("div", { className: 'w-1/4' },
                 react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),

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

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

package/lib/components/DocumentCenter/UploadFilesButton.js

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

package/lib/components/ExpertProfileHeader/ActionButtonSection.js

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

package/lib/components/ExpertProfileHeader/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, setOpen, paroProjectsData, getUserDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, isInternal, getUserByEmail, updateUserEmail, updateUserMutation, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, getExpertRates, paroTenure, hourlyRate, }) => {
     var _a;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const OrganizationChart: ({ expertFirms, openModal, setOpenModal, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile, }: any) => React.JSX.Element;

package/lib/components/OrganizationChart/OrgChart.js

@@ -0,0 +1,232 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrganizationChart = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const icons_1 = require("@material-ui/icons");
+const utils_1 = require("./utils");
+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' : ''}
+                    ` },
+                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)))),
+        react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg shadow-sm border text-center w-48 transition-all duration-200 group-hover:shadow-md" },
+            react_1.default.createElement("div", { className: "font-semibold text-[#102377]" }, name),
+            react_1.default.createElement("div", { className: "text-sm text-gray-600" }, position),
+            react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                experience,
+                " Years Experience"),
+            react_1.default.createElement("div", { className: "text-xs text-gray-500" }, location)))));
+const ServicesCard = ({ uniqueServices, employeeCount, employeeLocation, totalYears }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const handleExpandClick = () => {
+        setExpanded((prev) => !prev);
+    };
+    const highlightsExists = (employeeCount > 0 || employeeLocation !== 'none' || totalYears > 0);
+    const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) >= 1;
+    const theme = (0, core_1.useTheme)();
+    const smallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('lg'));
+    return (highlightsExists || uniqueServicesExists) ? react_1.default.createElement(utils_1.InfoCard, null,
+        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
+            react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                react_1.default.createElement("b", null, "Services Offered & Highlights")),
+            react_1.default.createElement(core_1.Tooltip, { title: !expanded ? "Expand to view services offered & highlights" : "", arrow: true, placement: 'top' },
+                react_1.default.createElement(core_1.IconButton, { onClick: handleExpandClick }, expanded ? react_1.default.createElement(icons_1.ExpandLess, null) : react_1.default.createElement(icons_1.ExpandMore, null)))),
+        react_1.default.createElement(core_1.Collapse, { in: expanded },
+            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { paddingLeft: 12 }, direction: smallScreen ? 'column' : 'row' },
+                uniqueServicesExists && react_1.default.createElement(core_1.Grid, { item: true },
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                        react_1.default.createElement("b", null, "Services Offered")),
+                    react_1.default.createElement("ul", { className: "pl-2 my-0" }, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
+                        return react_1.default.createElement("li", null, service);
+                    }))),
+                react_1.default.createElement(core_1.Box, { m: 1, mb: smallScreen ? 1 : 2 },
+                    react_1.default.createElement(core_1.Divider, { orientation: smallScreen ? 'horizontal' : 'vertical' })),
+                highlightsExists && react_1.default.createElement(core_1.Grid, { item: true },
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
+                        react_1.default.createElement("b", null, "Highlights")),
+                    react_1.default.createElement("ul", { className: "pl-2 my-0" },
+                        employeeCount > 0 && react_1.default.createElement("li", null,
+                            employeeCount,
+                            " Team Members"),
+                        employeeLocation !== 'none' && react_1.default.createElement("li", null, employeeLocation),
+                        totalYears > 0 && react_1.default.createElement("li", null,
+                            totalYears,
+                            " years of combined experience")))))) : react_1.default.createElement(react_1.default.Fragment, null);
+};
+const RenderChildren = ({ children, zooming, isDragging }) => {
+    const childWidth = 100 / children.length;
+    const hasSiblings = children.length > 1;
+    const childRefs = (0, react_1.useRef)([]);
+    const horizontalLineRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        if (hasSiblings && !zooming && !isDragging) {
+            children.forEach((child, index) => {
+                const firstChildRef = childRefs.current[index];
+                const lastChildRef = childRefs.current[children.length - 1];
+                if (firstChildRef && lastChildRef && horizontalLineRefs.current[index]) {
+                    const firstChildRect = firstChildRef.getBoundingClientRect();
+                    const lastChildRect = lastChildRef.getBoundingClientRect();
+                    horizontalLineRefs.current[index].style.left = `${(firstChildRect.width / 2)}px`;
+                    horizontalLineRefs.current[index].style.right = `${(lastChildRect.width / 2)}px`;
+                    horizontalLineRefs.current[index].style.width = 'auto';
+                }
+            });
+        }
+    }, [hasSiblings, children, zooming, isDragging]);
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full" },
+        react_1.default.createElement("div", { className: "relative w-full flex flex-col items-center" },
+            hasSiblings && react_1.default.createElement(utils_1.ConnectorContainer, { className: "parent-vertical-line" }),
+            react_1.default.createElement("div", { className: "relative w-full" },
+                react_1.default.createElement("div", { className: "flex justify-between relative", style: {
+                        margin: '0 auto',
+                        width: '100%'
+                    } },
+                    hasSiblings && (react_1.default.createElement(utils_1.ConnectorContainer, { ref: (el) => horizontalLineRefs.current[0] = el, className: "horizontal-line" })),
+                    react_1.default.createElement("div", { className: `flex gap-16 relative w-full justify-${hasSiblings ? 'between' : 'center'}` }, children.map((child, index) => {
+                        var _a, _b;
+                        return (react_1.default.createElement("div", { key: child.name, className: "flex flex-col items-center", style: { width: `${childWidth}%` } },
+                            react_1.default.createElement(utils_1.ConnectorContainer, { ref: (el) => childRefs.current[index] = el, className: "child-vertical-line" }),
+                            react_1.default.createElement("div", { className: "flex flex-col items-center relative" },
+                                react_1.default.createElement(PersonCard, Object.assign({}, child, { noOfchildren: (_b = (_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 })),
+                                child.children && child.children.length > 0 && (react_1.default.createElement(RenderChildren, { children: child.children, zooming: zooming, isDragging: isDragging })))));
+                    })))))));
+};
+const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile, }) => {
+    var _a, _b, _c, _d;
+    const services = (_a = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmClientReferences) === null || _a === void 0 ? void 0 : _a.flatMap((obj) => { var _a; return (_a = obj === null || obj === void 0 ? void 0 : obj.services) !== null && _a !== void 0 ? _a : []; });
+    const uniqueServices = (0, utils_1.parseServices)(services);
+    const employeeLocation = (0, utils_1.checkEmployeeLocation)(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
+    const totalYears = (0, utils_1.getTotalYearsWithFirm)(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
+    const treeData = (0, utils_1.transformEmployeeData)(expertFirms.expertFirmEmployees, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure);
+    const groupedEmployees = (_b = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees) === null || _b === void 0 ? void 0 : _b.reduce((acc, obj) => {
+        if (!acc[obj.level]) {
+            acc[obj.level] = [];
+        }
+        acc[obj.level].push(obj);
+        return acc;
+    }, {});
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: (groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? -100 : 1 });
+    const isDraggingRef = (0, react_1.useRef)(false);
+    const lastMousePosRef = (0, react_1.useRef)(null);
+    const zoomingRef = (0, react_1.useRef)(false);
+    const zoomTimeoutRef = (0, react_1.useRef)(null);
+    const MAX_ZOOM_IN = 5;
+    const MAX_ZOOM_OUT = 0.2;
+    const CONTENT_SIZE = 10;
+    // Center the content
+    const centerContent = (newScale) => {
+        const centerX = (CONTENT_SIZE * newScale) / 2;
+        const centerY = (CONTENT_SIZE * newScale) / 2;
+        setPosition({ x: centerX, y: centerY });
+    };
+    const handleWheel = (event) => {
+        event.preventDefault();
+        const zoomFactor = 0.1;
+        if (!zoomingRef.current) {
+            zoomingRef.current = true;
+            if (event.deltaY < 0) {
+                setScale((prev) => Math.min(prev + zoomFactor, MAX_ZOOM_IN));
+            }
+            else {
+                setScale((prev) => {
+                    const newScale = Math.max(prev - zoomFactor, MAX_ZOOM_OUT);
+                    if (newScale === MAX_ZOOM_OUT) {
+                        centerContent(newScale); // Center content when zoomed out fully
+                    }
+                    return newScale;
+                });
+            }
+            if (zoomTimeoutRef.current)
+                clearTimeout(zoomTimeoutRef.current);
+            zoomTimeoutRef.current = setTimeout(() => {
+                zoomingRef.current = false;
+            }, 10);
+        }
+    };
+    const handleMouseDown = (event) => {
+        isDraggingRef.current = true; // Start dragging
+        lastMousePosRef.current = { x: event.clientX, y: event.clientY };
+    };
+    const handleMouseMove = (event) => {
+        if (isDraggingRef.current && lastMousePosRef.current) {
+            const dx = event.clientX - lastMousePosRef.current.x;
+            const dy = event.clientY - lastMousePosRef.current.y;
+            setPosition((prev) => ({
+                x: prev.x + dx,
+                y: prev.y + dy,
+            }));
+            lastMousePosRef.current = { x: event.clientX, y: event.clientY };
+        }
+    };
+    const handleMouseUp = () => {
+        isDraggingRef.current = false;
+    };
+    const handleDoubleClick = () => {
+        const newScale = 1;
+        setScale(newScale);
+        centerContent(newScale);
+    };
+    return (react_1.default.createElement(utils_1.CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: "paper" },
+        react_1.default.createElement("div", { className: "w-full h-full bg-gray-50 relative" },
+            react_1.default.createElement(core_1.Grid, { container: true, justifyContent: "space-between", alignItems: "center", style: { padding: '1rem' } },
+                react_1.default.createElement(core_1.Box, null,
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
+                        react_1.default.createElement(core_1.Box, null, "Organizational Structure & Services")),
+                    react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                        react_1.default.createElement(core_1.Box, null, "See what services the organization offers and where they're located"))),
+                react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false), style: { position: 'absolute', top: 0, right: 0 } },
+                    react_1.default.createElement(icons_1.Close, null))),
+            isPublicProfile && (react_1.default.createElement(ServicesCard, { uniqueServices: uniqueServices, employeeCount: expertFirms.employeeCount, employeeLocation: employeeLocation, totalYears: totalYears })),
+            react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
+                    overflow: 'hidden',
+                    width: '100%',
+                    height: '100vh',
+                    position: 'relative',
+                } },
+                react_1.default.createElement("div", { onMouseDown: handleMouseDown, style: {
+                        transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+                        transformOrigin: 'center',
+                        transition: 'transform 0.1s',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        cursor: isDraggingRef.current ? 'grabbing' : 'grab',
+                        userSelect: 'none',
+                    } },
+                    react_1.default.createElement("div", { className: "p-8" },
+                        react_1.default.createElement("div", { className: "flex flex-col items-center" },
+                            react_1.default.createElement(PersonCard, Object.assign({}, treeData, { noOfchildren: (_d = (_c = treeData === null || treeData === void 0 ? void 0 : treeData.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0 })),
+                            react_1.default.createElement(RenderChildren, { children: treeData.children || [], zooming: zoomingRef.current, isDragging: isDraggingRef.current }))))))));
+};
+exports.OrganizationChart = OrganizationChart;

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

@@ -1 +1 @@
-export { OrganizationChart } from './OrganizationChart';
+export { OrganizationChart } from './OrgChart';

package/lib/components/OrganizationChart/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrganizationChart = void 0;
-var OrganizationChart_1 = require("./OrganizationChart");
-Object.defineProperty(exports, "OrganizationChart", { enumerable: true, get: function () { return OrganizationChart_1.OrganizationChart; } });
+var OrgChart_1 = require("./OrgChart");
+Object.defineProperty(exports, "OrganizationChart", { enumerable: true, get: function () { return OrgChart_1.OrganizationChart; } });