@paro.io/expert-shared-components 1.14.14 → 1.14.15

package/lib/components/Escalations/ViewReponseModal.js

@@ -1,27 +1,27 @@
-"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 base_icons_1 = require("@paro.io/base-icons");
-const core_1 = require("@material-ui/core");
-const ViewResponseModal = ({ response, open, onClose, isExpert }) => {
-    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: onClose, maxWidth: 'sm' },
-        react_1.default.createElement(core_1.DialogTitle, null,
-            react_1.default.createElement("div", { className: "text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
-                react_1.default.createElement("div", { className: "flex flex-col items-start" },
-                    react_1.default.createElement("h1", { className: "text-md font-bold mr-2" }, isExpert ? 'Client Response' : 'Expert Response')),
-                react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(core_1.IconButton, { onClick: onClose },
-                        react_1.default.createElement(base_icons_1.IconX, null))))),
-        react_1.default.createElement(core_1.DialogContent, null,
-            react_1.default.createElement("div", { className: "bg-green-50 border-green-800 border border-l-4 rounded p-4 mt-4 mb-4" },
-                react_1.default.createElement("p", { className: "text-sm font-medium" },
-                    "Status: ",
-                    react_1.default.createElement("span", { className: "font-normal" }, "Responded")),
-                react_1.default.createElement("p", { className: "text-sm font-medium" },
-                    "Response: ",
-                    react_1.default.createElement("span", { className: "font-normal" }, response))))));
-};
-exports.default = ViewResponseModal;
+"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 base_icons_1 = require("@paro.io/base-icons");
+const core_1 = require("@material-ui/core");
+const ViewResponseModal = ({ response, open, onClose, isExpert }) => {
+    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: onClose, maxWidth: 'sm' },
+        react_1.default.createElement(core_1.DialogTitle, null,
+            react_1.default.createElement("div", { className: "text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
+                react_1.default.createElement("div", { className: "flex flex-col items-start" },
+                    react_1.default.createElement("h1", { className: "text-md font-bold mr-2" }, isExpert ? 'Client Response' : 'Expert Response')),
+                react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(core_1.IconButton, { onClick: onClose },
+                        react_1.default.createElement(base_icons_1.IconX, null))))),
+        react_1.default.createElement(core_1.DialogContent, null,
+            react_1.default.createElement("div", { className: "bg-green-50 border-green-800 border border-l-4 rounded p-4 mt-4 mb-4" },
+                react_1.default.createElement("p", { className: "text-sm font-medium" },
+                    "Status: ",
+                    react_1.default.createElement("span", { className: "font-normal" }, "Responded")),
+                react_1.default.createElement("p", { className: "text-sm font-medium" },
+                    "Response: ",
+                    react_1.default.createElement("span", { className: "font-normal" }, response))))));
+};
+exports.default = ViewResponseModal;

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/ExpertProfileHeader/TeamsSection.js

@@ -77,6 +77,6 @@ const TeamsSection = ({ estimatedAvailability, nextMonthTrueAvailability, expert
                 react_1.default.createElement(core_1.Divider, null)),
             react_1.default.createElement(TeamDetail, { label: "# of Services", value: (_e = uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) !== null && _e !== void 0 ? _e : 0 }))),
         openModal && expertFirms &&
-            react_1.default.createElement(OrganizationChart_1.OrganizationChart, { openModal: openModal, setOpenModal: setOpenModal, expertFirms: expertFirms, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, city: city, stateAbbreviation: stateAbbreviation, paroTenure: paroTenure, imageUrl: imageUrl, isPublicProfile: false })));
+            react_1.default.createElement(OrganizationChart_1.OrganizationChart, { openModal: openModal, setOpenModal: setOpenModal, expertFirms: expertFirms, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, city: city, stateAbbreviation: stateAbbreviation, paroTenure: paroTenure, isPublicProfile: false })));
 };
 exports.default = TeamsSection;

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

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

package/lib/components/HeaderNavBar/index.js

@@ -7,9 +7,14 @@ exports.HeaderNavBar = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("@material-ui/core");
 const base_icons_1 = require("@paro.io/base-icons");
-const HeaderNavBar = ({ setOpenDocumentModal, setOpenServiceLinesTemplate, setOpenExpertWallet, isWalletTester, isClientPortal = false }) => {
-    return (react_1.default.createElement("div", { className: "flex w-full bg-white p-1 shadow-sm justify-end" },
+const ForumOutlined_1 = __importDefault(require("@material-ui/icons/ForumOutlined"));
+const GroupAdd_1 = __importDefault(require("@material-ui/icons/GroupAdd"));
+const HeaderNavBar = ({ setOpenDocumentModal, setOpenServiceLinesTemplate, setOpenExpertWallet, isWalletTester, isClientPortal = false, setFaqModal, setOpenOrganizationModal }) => {
+    return (react_1.default.createElement("div", { className: "flex w-full bg-white p-1 shadow-sm justify-start" },
         react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } },
+            !isClientPortal && react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Manage Firm" },
+                react_1.default.createElement(core_1.IconButton, { id: "reactour__inviteToFirmButton", onClick: () => { setOpenOrganizationModal(true); }, "data-tut": "reactour__inviteToFirmButton" },
+                    react_1.default.createElement(GroupAdd_1.default, { fontSize: "medium", className: "text-black" }))),
             !isClientPortal && isWalletTester && react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Wallet" },
                 react_1.default.createElement(core_1.IconButton, { id: "expert_wallet_button", onClick: () => setOpenExpertWallet(true) },
                     " ",
@@ -24,6 +29,9 @@ const HeaderNavBar = ({ setOpenDocumentModal, setOpenServiceLinesTemplate, setOp
                 react_1.default.createElement(core_1.IconButton, { id: "document_center_button", "data-tut": "document_center_button", onClick: () => setOpenDocumentModal(true) },
                     " ",
                     react_1.default.createElement(base_icons_1.IconDocumentText, { size: "md" }),
-                    " ")))));
+                    " ")),
+            react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "FAQ" },
+                react_1.default.createElement(core_1.IconButton, { id: "reactour__faqbutton", onClick: () => { setFaqModal(true); }, "data-tut": "reactour__faqbutton" },
+                    react_1.default.createElement(ForumOutlined_1.default, { fontSize: "medium", className: "text-black" }))))));
 };
 exports.HeaderNavBar = HeaderNavBar;

package/lib/components/Invoices/TestDecisionSection.d.ts

@@ -1 +1 @@
-export declare const TestDecisionSection: () => JSX.Element;
+export declare const TestDecisionSection: () => JSX.Element;

package/lib/components/Invoices/TestDecisionSection.js

@@ -1,126 +1,126 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestDecisionSection = void 0;
-const react_1 = __importDefault(require("react"));
-const DecisionSection_1 = require("./DecisionSection");
-// Test data from the provided JSON
-const testDispute = {
-    "__typename": "ClientInvoiceDispute",
-    "disputeId": 35,
-    "approvedAmount": 450,
-    "chatEnabled": true,
-    "disputeDate": "2025-05-22",
-    "disputeUpdatedDate": "2025-05-23",
-    "freelancerId": 8081,
-    "freelancer": {
-        "__typename": "User",
-        "id": 8081,
-        "email": "andpande@gmail.com",
-        "firstName": "William",
-        "lastName": "Annon"
-    },
-    "status": "Resolved",
-    "finalDecisionOwnerId": 29005,
-    "invoice": {
-        "__typename": "ClientInvoice",
-        "amount": 450,
-        "balanceDue": 450,
-        "clientId": 4433,
-        "dateGenerated": "2025-04-14",
-        "id": 175325,
-        "month": "2025-04-01"
-    },
-    "disputeProjects": [
-        {
-            "__typename": "ClientInvoiceDisputeProject",
-            "id": 37,
-            "projectId": 19158,
-            "disputeAmount": 450,
-            "disputeHours": 30,
-            "disputeType": "Hourly",
-            "disputeReasonCode": "Incorrect Hours Logged",
-            "clientExplanation": "I have a dispute over this expert for the current invoice 175325",
-            "clientDocumentLinks": "https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2Ftesting.pdf,https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2F_Carmelita_Resume-Graduation__1_.docx",
-            "expertDocumentLinks": "https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2F0eb4b31b-b6d8-4cd1-b6ac-39b807ea4577.pdf",
-            "resolutionMode": null,
-            "resolutionType": null,
-            "project": {
-                "__typename": "Project",
-                "name": "Ongoing Ad-Hoc Support",
-                "freelancerRate": null,
-                "clientRate": null,
-                "projectHours": [
-                    {
-                        "__typename": "ProjectHour",
-                        "id": 136605,
-                        "date": "2022-02-11",
-                        "description": "Ate Tacos",
-                        "hours": 8
-                    },
-                    {
-                        "__typename": "ProjectHour",
-                        "id": 136606,
-                        "date": "2022-02-12",
-                        "description": "Worked on project analysis",
-                        "hours": 6
-                    },
-                    {
-                        "__typename": "ProjectHour",
-                        "id": 136607,
-                        "date": "2022-02-13",
-                        "description": "Client meeting and documentation",
-                        "hours": 4
-                    },
-                    {
-                        "__typename": "ProjectHour",
-                        "id": 136608,
-                        "date": "2022-02-14",
-                        "description": "Code review and testing",
-                        "hours": 7
-                    },
-                    {
-                        "__typename": "ProjectHour",
-                        "id": 136609,
-                        "date": "2022-02-15",
-                        "description": "Final deliverable preparation",
-                        "hours": 5
-                    }
-                ]
-            }
-        }
-    ],
-    "lastMessageAt": "2025-05-23T10:56:53.000Z",
-    "messageCount": 5,
-    "client": {
-        "__typename": "Client",
-        "name": "Vessel Advisors"
-    }
-};
-const testUser = {
-    userId: 29005,
-    firstName: "Test",
-    lastName: "User"
-};
-const TestDecisionSection = () => {
-    const mockOnUpdateDispute = (variables) => __awaiter(void 0, void 0, void 0, function* () {
-        console.log('Mock update dispute called with:', variables);
-        return Promise.resolve({ success: true });
-    });
-    const mockUpdateInvoiceMutation = {};
-    return (react_1.default.createElement("div", { className: "p-8 max-w-4xl mx-auto" },
-        react_1.default.createElement("h1", { className: "text-2xl font-bold mb-6" }, "Test Decision Section with Hours Modal"),
-        react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: testDispute, onUpdateDispute: mockOnUpdateDispute, updateInvoiceMutation: mockUpdateInvoiceMutation, user: testUser })));
-};
-exports.TestDecisionSection = TestDecisionSection;
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestDecisionSection = void 0;
+const react_1 = __importDefault(require("react"));
+const DecisionSection_1 = require("./DecisionSection");
+// Test data from the provided JSON
+const testDispute = {
+    "__typename": "ClientInvoiceDispute",
+    "disputeId": 35,
+    "approvedAmount": 450,
+    "chatEnabled": true,
+    "disputeDate": "2025-05-22",
+    "disputeUpdatedDate": "2025-05-23",
+    "freelancerId": 8081,
+    "freelancer": {
+        "__typename": "User",
+        "id": 8081,
+        "email": "andpande@gmail.com",
+        "firstName": "William",
+        "lastName": "Annon"
+    },
+    "status": "Resolved",
+    "finalDecisionOwnerId": 29005,
+    "invoice": {
+        "__typename": "ClientInvoice",
+        "amount": 450,
+        "balanceDue": 450,
+        "clientId": 4433,
+        "dateGenerated": "2025-04-14",
+        "id": 175325,
+        "month": "2025-04-01"
+    },
+    "disputeProjects": [
+        {
+            "__typename": "ClientInvoiceDisputeProject",
+            "id": 37,
+            "projectId": 19158,
+            "disputeAmount": 450,
+            "disputeHours": 30,
+            "disputeType": "Hourly",
+            "disputeReasonCode": "Incorrect Hours Logged",
+            "clientExplanation": "I have a dispute over this expert for the current invoice 175325",
+            "clientDocumentLinks": "https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2Ftesting.pdf,https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2F_Carmelita_Resume-Graduation__1_.docx",
+            "expertDocumentLinks": "https://expert-client-dispute-files.s3.amazonaws.com/project-19158%2F0eb4b31b-b6d8-4cd1-b6ac-39b807ea4577.pdf",
+            "resolutionMode": null,
+            "resolutionType": null,
+            "project": {
+                "__typename": "Project",
+                "name": "Ongoing Ad-Hoc Support",
+                "freelancerRate": null,
+                "clientRate": null,
+                "projectHours": [
+                    {
+                        "__typename": "ProjectHour",
+                        "id": 136605,
+                        "date": "2022-02-11",
+                        "description": "Ate Tacos",
+                        "hours": 8
+                    },
+                    {
+                        "__typename": "ProjectHour",
+                        "id": 136606,
+                        "date": "2022-02-12",
+                        "description": "Worked on project analysis",
+                        "hours": 6
+                    },
+                    {
+                        "__typename": "ProjectHour",
+                        "id": 136607,
+                        "date": "2022-02-13",
+                        "description": "Client meeting and documentation",
+                        "hours": 4
+                    },
+                    {
+                        "__typename": "ProjectHour",
+                        "id": 136608,
+                        "date": "2022-02-14",
+                        "description": "Code review and testing",
+                        "hours": 7
+                    },
+                    {
+                        "__typename": "ProjectHour",
+                        "id": 136609,
+                        "date": "2022-02-15",
+                        "description": "Final deliverable preparation",
+                        "hours": 5
+                    }
+                ]
+            }
+        }
+    ],
+    "lastMessageAt": "2025-05-23T10:56:53.000Z",
+    "messageCount": 5,
+    "client": {
+        "__typename": "Client",
+        "name": "Vessel Advisors"
+    }
+};
+const testUser = {
+    userId: 29005,
+    firstName: "Test",
+    lastName: "User"
+};
+const TestDecisionSection = () => {
+    const mockOnUpdateDispute = (variables) => __awaiter(void 0, void 0, void 0, function* () {
+        console.log('Mock update dispute called with:', variables);
+        return Promise.resolve({ success: true });
+    });
+    const mockUpdateInvoiceMutation = {};
+    return (react_1.default.createElement("div", { className: "p-8 max-w-4xl mx-auto" },
+        react_1.default.createElement("h1", { className: "text-2xl font-bold mb-6" }, "Test Decision Section with Hours Modal"),
+        react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: testDispute, onUpdateDispute: mockOnUpdateDispute, updateInvoiceMutation: mockUpdateInvoiceMutation, user: testUser })));
+};
+exports.TestDecisionSection = TestDecisionSection;

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

@@ -1,2 +1,16 @@
 import React from 'react';
-export declare const OrganizationChart: ({ expertFirms, openModal, setOpenModal, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile, }: any) => React.JSX.Element;
+type OrganizationChartProps = {
+    expertFirms: any;
+    firstName: string;
+    lastName: string;
+    primaryServiceLine: string;
+    city: string;
+    stateAbbreviation: string;
+    paroTenure?: string;
+    isPublicProfile: boolean;
+    showAsComponent?: boolean;
+    openModal?: boolean;
+    setOpenModal?: (open: boolean) => void;
+};
+export declare const OrganizationChart: ({ expertFirms, openModal, setOpenModal, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile, showAsComponent, }: OrganizationChartProps) => React.JSX.Element;
+export {};

package/lib/components/OrganizationChart/OrgChart.js

@@ -71,13 +71,16 @@ const RenderChildren = ({ children, zooming, isDragging }) => {
                                 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, }) => {
+const OrganizationChart = ({ expertFirms, openModal = false, setOpenModal, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure = '', isPublicProfile, showAsComponent = false, }) => {
     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 allEmployeeData = expertFirms.expertFirmEmployees.map((e) => {
+        return Object.assign(Object.assign({}, e), { employeeName: e.employeeFirstName + " " + e.employeeLastName });
+    });
+    const treeData = (0, utils_1.transformEmployeeData)(allEmployeeData, 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] = [];
@@ -147,36 +150,36 @@ const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, la
         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_1.default, { 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',
+    const Content = (react_1.default.createElement("div", { className: "w-full h-full bg-gray-50 relative" },
+        !showAsComponent && 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 && setOpenModal(false); }, style: { position: 'absolute', top: 0, right: 0 } },
+                react_1.default.createElement(icons_1.Close, null))),
+        isPublicProfile && (react_1.default.createElement(ServicesCard_1.default, { 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: '100vh',
+                    height: '100%',
                     position: 'relative',
+                    cursor: isDraggingRef.current ? 'grabbing' : 'grab',
+                    userSelect: 'none',
                 } },
-                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_1.default, 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 }))))))));
+                react_1.default.createElement("div", { className: "p-8" },
+                    react_1.default.createElement("div", { className: "flex flex-col items-center" },
+                        react_1.default.createElement(PersonCard_1.default, 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 })))))));
+    return showAsComponent ? (Content) : (react_1.default.createElement(utils_1.CustomDialog, { open: openModal, onClose: () => { setOpenModal && setOpenModal(false); }, fullScreen: true, scroll: "paper" }, Content));
 };
 exports.OrganizationChart = OrganizationChart;

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

@@ -1,15 +1,15 @@
-interface OrgChartProps {
-    openModal: boolean;
-    setOpenModal: (openModal: boolean) => void;
-    expertFirms: any;
-    firstName: string;
-    lastName: string;
-    imageUrl?: string;
-    primaryServiceLine: string;
-    city: string;
-    stateAbbreviation: string;
-    paroTenure?: string;
-    isPublicProfile?: boolean;
-}
-export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
-export {};
+interface OrgChartProps {
+    openModal: boolean;
+    setOpenModal: (openModal: boolean) => void;
+    expertFirms: any;
+    firstName: string;
+    lastName: string;
+    imageUrl?: string;
+    primaryServiceLine: string;
+    city: string;
+    stateAbbreviation: string;
+    paroTenure?: string;
+    isPublicProfile?: boolean;
+}
+export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
+export {};