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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/components/ExpertProfileHeader/ExpertProfileHeader.d.ts +2 -1
  2. package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js +2 -2
  3. package/lib/components/ExpertProfileHeader/NetworkSection.d.ts +2 -1
  4. package/lib/components/ExpertProfileHeader/NetworkSection.js +2 -2
  5. package/lib/components/OrganizationChart/OrgChart.js +8 -58
  6. package/lib/components/OrganizationChart/OrganizationChart.d.ts +15 -15
  7. package/lib/components/OrganizationChart/OrganizationChart.js +305 -305
  8. package/lib/components/OrganizationChart/PersonCard.d.ts +15 -0
  9. package/lib/components/OrganizationChart/PersonCard.js +25 -0
  10. package/lib/components/OrganizationChart/ServicesCard.d.ts +3 -0
  11. package/lib/components/OrganizationChart/ServicesCard.js +67 -0
  12. package/lib/components/OrganizationChart/utils.js +0 -48
  13. package/lib/components/ProfileCompletedPercentange/ProfileCompletedPercentage.d.ts +2 -1
  14. package/lib/components/ProfileCompletedPercentange/ProfileCompletedPercentage.js +4 -1
  15. package/package.json +1 -1
package/lib/components/ExpertProfileHeader/ExpertProfileHeader.d.ts CHANGED
@@ -77,6 +77,7 @@ type ProfileCompletedPercentageProps = {
77
77
  isWhiteLabel: boolean;
78
78
  detailsSectionCompleted: boolean;
79
79
  handleScrollToBottom?: () => void;
80
+ clientReferencesSectionCompleted: boolean;
80
81
  };
81
- export declare const ExpertProfileHeader: ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
82
+ export declare const ExpertProfileHeader: ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, clientReferencesSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }: SectionContents & PersonalInformationType & ProfileCompletedPercentageProps & QueryAndMutationProps & ChangeEmailPasswordProps) => JSX.Element;
82
83
  export {};
package/lib/components/ExpertProfileHeader/ExpertProfileHeader.js CHANGED
@@ -76,7 +76,7 @@ const convertRegionToStateAbbreviation = (region) => {
76
76
  const personalInformationReducer = (state, updatedState) => {
77
77
  return Object.assign(Object.assign({}, state), updatedState);
78
78
  };
79
- const ExpertProfileHeader = ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }) => {
79
+ const ExpertProfileHeader = ({ expertId, legacyFreelancerId, address: addressForReducer, companyName: companyNameForReducer, legacyMetadata: legacyMetadataForReducer, legacyMetadata: { primaryServiceLine, applicationStatus }, user: userForReducer, user: { id, imageUrl, email }, firmTags, detailsSectionCompleted, clientReferencesSectionCompleted, preferenceTasks, isWhiteLabel, handleScrollToBottom, haveATeamProp, expertFirms, paroAppUrl, isExpertOps, internalUserId, getExpertByLegacyFreelancerIdDocument, createExpertPublicProfileTrackingRecord, updateFreelancerServiceLine, serviceLineLoading, serviceLineData, serviceLineError, reviewData, profileReviewError, availabilityData, nextMonthAvailabilityData, expertStatusData, expertStatusLoading, expertLevelsData, projectsData, paroProjectsLoading, expertMetricsData, expertMetricsLoading, upSellCrossSellData, upSellCrossSellLoading, projectChangeLogData, projectChangeLogLoading, updateAddressMutation, addressUpdateLoading, updateUserMutation, userUpdateLoading, updateUserError, updateFreelancerMutation, updateFreelancerLoading, updateFreelancerError, getFreelancerEarnings, getQualityKPIs, expertLevelsTrainings, trainingsDataLoading, assignLetterTrainingToExpert, assignTrainingLoading, assignTrainingError, getUserDocument, getExpertStatusDocument, uploadUserPhotoMutation, loadingNewImage, imageUpdateError, getUserByEmail, updateUserEmail, getUserByEmailLazyQuery, updateUserPassword, verifyUserPassword, openServiceLinesTemplate, setOpenServiceLinesTemplate, getExpertVanityTitles, getExpertRates, updateExpert, vanityTitle, }) => {
80
80
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
81
81
  const [leftSideStatus, setLeftSideStatus] = react_1.default.useState("");
82
82
  const [rightSideStatus, setRightSideStatus] = react_1.default.useState("");
@@ -219,7 +219,7 @@ const ExpertProfileHeader = ({ expertId, legacyFreelancerId, address: addressFor
219
219
  react_1.default.createElement(ProfileSection_1.default, { legacyFreelancerId: Number(legacyFreelancerId), imageUrl: imageUrl, shouldAllowEditProfile: isExpertOps !== null && isExpertOps !== void 0 ? isExpertOps : false, firstName: firstName, lastName: lastName, primaryServiceLine: primaryServiceLine, editServiceLine: editServiceLine, city: city, stateAbbreviation: stateAbbreviation, email: email, phone: phone, setOpen: setOpen, paroTenure: paroTenure, hourlyRate: defaultHourlyRate, paroProjectsData: paroProjectsData, getUserDocument: getUserDocument, uploadUserPhotoMutation: uploadUserPhotoMutation, loadingNewImage: loadingNewImage, imageUpdateError: imageUpdateError, isInternal: isInternal, getUserByEmail: getUserByEmail, updateUserEmail: updateUserEmail, updateUserMutation: updateUserMutation, getUserByEmailLazyQuery: getUserByEmailLazyQuery, updateUserPassword: updateUserPassword, verifyUserPassword: verifyUserPassword, getExpertRates: getExpertRates }),
220
220
  react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical', style: { marginLeft: '0px !important' } })),
221
221
  react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
222
- react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal, paroTenure: paroTenure, getExpertVanityTitles: getExpertVanityTitles, updateExpert: updateExpert, expertId: expertId, legacyFreelancerId: Number(legacyFreelancerId), vanityTitle: vanityTitle, getExpertByLegacyFreelancerIdDocument: getExpertByLegacyFreelancerIdDocument }),
222
+ react_1.default.createElement(NetworkSection_1.default, { handleScrollToBottom: isInternal && handleScrollToBottom ? handleScrollToBottom : () => { }, preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, clientReferencesSectionCompleted: clientReferencesSectionCompleted, infoColor: infoColor, leftSideStatus: leftSideStatus, rightSideStatus: rightSideStatus, isInternal: isInternal, paroTenure: paroTenure, getExpertVanityTitles: getExpertVanityTitles, updateExpert: updateExpert, expertId: expertId, legacyFreelancerId: Number(legacyFreelancerId), vanityTitle: vanityTitle, getExpertByLegacyFreelancerIdDocument: getExpertByLegacyFreelancerIdDocument }),
223
223
  react_1.default.createElement(core_1.Divider, { orientation: isSmallScreen ? 'horizontal' : 'vertical' })),
224
224
  react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'column', justify: 'space-between', xs: 12, md: true, style: { flex: '1', width: 'auto' } },
225
225
  react_1.default.createElement(EarningsSection_1.default, { expertServiceLinesPlus: expertServiceLinesPlus, firmTags: firmTags, haveATeamProp: haveATeamProp, expertLevels: expertLevels, currentMonthGoalHours: currentMonthGoalHours, expertIRPRRatio: expertIRPRRatio, winRate: winRate, expertIRPRRatioPrev: expertIRPRRatioPrev, winRatePrev: winRatePrev, earnings: earnings, upsell: upsell, crossSell: crossSell, lifetimeIRPR: lifetimeIRPR, lifetimeWinRate: lifetimeWinRate, hasCompletedProjects: (_k = expertMetricsData === null || expertMetricsData === void 0 ? void 0 : expertMetricsData.getExpertMetrics) === null || _k === void 0 ? void 0 : _k.lastProjectCompleted, lifetimeFSV: lifetimeFSV }),
package/lib/components/ExpertProfileHeader/NetworkSection.d.ts CHANGED
@@ -3,6 +3,7 @@ interface NetworkSectionProps {
3
3
  preferenceTasks: any;
4
4
  isWhiteLabel: boolean;
5
5
  detailsSectionCompleted: boolean;
6
+ clientReferencesSectionCompleted: boolean;
6
7
  infoColor: any;
7
8
  leftSideStatus: string;
8
9
  rightSideStatus: string;
@@ -15,5 +16,5 @@ interface NetworkSectionProps {
15
16
  vanityTitle: string;
16
17
  getExpertByLegacyFreelancerIdDocument: any;
17
18
  }
18
- declare const NetworkSection: ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }: NetworkSectionProps) => JSX.Element;
19
+ declare const NetworkSection: ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, clientReferencesSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }: NetworkSectionProps) => JSX.Element;
19
20
  export default NetworkSection;
package/lib/components/ExpertProfileHeader/NetworkSection.js CHANGED
@@ -75,7 +75,7 @@ const ExpertiseTitleModal = ({ openModal, updateTitle, titleOptions, selectedTit
75
75
  react_1.default.createElement(base_ui_1.Button, { label: "UPDATE PROFILE", onClick: handleUpdateExpertTitle, type: "button", isLoading: updateTitle, disabled: selectedTitle === null || (selectedTitle === 'Other' && (customTitle === null || customTitle === '')), color: "primary" }),
76
76
  react_1.default.createElement(base_ui_1.Button, { label: "CANCEL", onClick: handleOnClose, type: "button", disabled: updateTitle, isLoading: updateTitle })))));
77
77
  };
78
- const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }) => {
78
+ const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, detailsSectionCompleted, clientReferencesSectionCompleted, infoColor, leftSideStatus, rightSideStatus, isInternal, paroTenure, getExpertVanityTitles, updateExpert, expertId, legacyFreelancerId, vanityTitle, getExpertByLegacyFreelancerIdDocument, }) => {
79
79
  const [openModal, setOpenModal] = (0, react_1.useState)(false);
80
80
  const [selectedTitle, setSelectedTitle] = (0, react_1.useState)(vanityTitle);
81
81
  const [customTitle, setCustomTitle] = (0, react_1.useState)(null);
@@ -113,7 +113,7 @@ const NetworkSection = ({ handleScrollToBottom, preferenceTasks, isWhiteLabel, d
113
113
  react_1.default.createElement(core_1.Grid, { style: { paddingLeft: '10px' } },
114
114
  react_1.default.createElement("b", null, "Profile"),
115
115
  react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-start', cursor: 'pointer', width: 'full', marginBottom: '6px', zIndex: 1 }, onClick: handleScrollToBottom },
116
- react_1.default.createElement(ProfileCompletedPercentange_1.ProfileCompletedPercentage, { preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted }))),
116
+ react_1.default.createElement(ProfileCompletedPercentange_1.ProfileCompletedPercentage, { preferenceTasks: preferenceTasks, isWhiteLabel: isWhiteLabel, detailsSectionCompleted: detailsSectionCompleted, clientReferencesSectionCompleted: clientReferencesSectionCompleted }))),
117
117
  react_1.default.createElement(core_1.Box, { mt: 4, mb: 2, mr: 2 },
118
118
  react_1.default.createElement(core_1.Divider, null)),
119
119
  react_1.default.createElement(core_1.Box, { ml: 1, display: "flex", justifyContent: "space-between", alignItems: "center", "data-testid": "Matching-Id", style: { marginRight: '10px' } },
package/lib/components/OrganizationChart/OrgChart.js CHANGED
@@ -22,67 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
29
  exports.OrganizationChart = void 0;
27
30
  const react_1 = __importStar(require("react"));
28
31
  const core_1 = require("@material-ui/core");
29
32
  const icons_1 = require("@material-ui/icons");
30
33
  const utils_1 = require("./utils");
31
- const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
32
- react_1.default.createElement("div", { className: "flex flex-col items-center" },
33
- react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
34
- react_1.default.createElement("div", { className: `
35
- -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center
36
- text-white font-semibold text-lg
37
- transition-all duration-200 hover:bg-[#102377]
38
- ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
39
- ` },
40
- initial,
41
- 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)))),
42
- 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" },
43
- react_1.default.createElement("div", { className: "font-semibold text-[#102377]" }, name),
44
- react_1.default.createElement("div", { className: "text-sm text-gray-600" }, position),
45
- react_1.default.createElement("div", { className: "text-xs text-gray-500" },
46
- experience,
47
- " Years Experience"),
48
- react_1.default.createElement("div", { className: "text-xs text-gray-500" }, location)))));
49
- const ServicesCard = ({ uniqueServices, employeeCount, employeeLocation, totalYears }) => {
50
- const [expanded, setExpanded] = (0, react_1.useState)(false);
51
- const handleExpandClick = () => {
52
- setExpanded((prev) => !prev);
53
- };
54
- const highlightsExists = (employeeCount > 0 || employeeLocation !== 'none' || totalYears > 0);
55
- const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) >= 1;
56
- const theme = (0, core_1.useTheme)();
57
- const smallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('lg'));
58
- return (highlightsExists || uniqueServicesExists) ? react_1.default.createElement(utils_1.InfoCard, null,
59
- react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
60
- react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
61
- react_1.default.createElement("b", null, "Services Offered & Highlights")),
62
- react_1.default.createElement(core_1.Tooltip, { title: !expanded ? "Expand to view services offered & highlights" : "", arrow: true, placement: 'top' },
63
- 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)))),
64
- react_1.default.createElement(core_1.Collapse, { in: expanded },
65
- react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { paddingLeft: 12 }, direction: smallScreen ? 'column' : 'row' },
66
- uniqueServicesExists && react_1.default.createElement(core_1.Grid, { item: true },
67
- react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
68
- react_1.default.createElement("b", null, "Services Offered")),
69
- react_1.default.createElement("ul", { className: "pl-2 my-0" }, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
70
- return react_1.default.createElement("li", null, service);
71
- }))),
72
- react_1.default.createElement(core_1.Box, { m: 1, mb: smallScreen ? 1 : 2 },
73
- react_1.default.createElement(core_1.Divider, { orientation: smallScreen ? 'horizontal' : 'vertical' })),
74
- highlightsExists && react_1.default.createElement(core_1.Grid, { item: true },
75
- react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
76
- react_1.default.createElement("b", null, "Highlights")),
77
- react_1.default.createElement("ul", { className: "pl-2 my-0" },
78
- employeeCount > 0 && react_1.default.createElement("li", null,
79
- employeeCount,
80
- " Team Members"),
81
- employeeLocation !== 'none' && react_1.default.createElement("li", null, employeeLocation),
82
- totalYears > 0 && react_1.default.createElement("li", null,
83
- totalYears,
84
- " years of combined experience")))))) : react_1.default.createElement(react_1.default.Fragment, null);
85
- };
34
+ const PersonCard_1 = __importDefault(require("./PersonCard"));
35
+ const ServicesCard_1 = __importDefault(require("./ServicesCard"));
86
36
  const RenderChildren = ({ children, zooming, isDragging }) => {
87
37
  const childWidth = 100 / children.length;
88
38
  const hasSiblings = children.length > 1;
@@ -117,7 +67,7 @@ const RenderChildren = ({ children, zooming, isDragging }) => {
117
67
  return (react_1.default.createElement("div", { key: child.name, className: "flex flex-col items-center", style: { width: `${childWidth}%` } },
118
68
  react_1.default.createElement(utils_1.ConnectorContainer, { ref: (el) => childRefs.current[index] = el, className: "child-vertical-line" }),
119
69
  react_1.default.createElement("div", { className: "flex flex-col items-center relative" },
120
- 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 })),
70
+ react_1.default.createElement(PersonCard_1.default, 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 })),
121
71
  child.children && child.children.length > 0 && (react_1.default.createElement(RenderChildren, { children: child.children, zooming: zooming, isDragging: isDragging })))));
122
72
  })))))));
123
73
  };
@@ -207,7 +157,7 @@ const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, la
207
157
  react_1.default.createElement(core_1.Box, null, "See what services the organization offers and where they're located"))),
208
158
  react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false), style: { position: 'absolute', top: 0, right: 0 } },
209
159
  react_1.default.createElement(icons_1.Close, null))),
210
- isPublicProfile && (react_1.default.createElement(ServicesCard, { uniqueServices: uniqueServices, employeeCount: expertFirms.employeeCount, employeeLocation: employeeLocation, totalYears: totalYears })),
160
+ isPublicProfile && (react_1.default.createElement(ServicesCard_1.default, { uniqueServices: uniqueServices, employeeCount: expertFirms.employeeCount, employeeLocation: employeeLocation, totalYears: totalYears })),
211
161
  react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
212
162
  overflow: 'hidden',
213
163
  width: '100%',
@@ -226,7 +176,7 @@ const OrganizationChart = ({ expertFirms, openModal, setOpenModal, firstName, la
226
176
  } },
227
177
  react_1.default.createElement("div", { className: "p-8" },
228
178
  react_1.default.createElement("div", { className: "flex flex-col items-center" },
229
- 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 })),
179
+ 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 })),
230
180
  react_1.default.createElement(RenderChildren, { children: treeData.children || [], zooming: zoomingRef.current, isDragging: isDraggingRef.current }))))))));
231
181
  };
232
182
  exports.OrganizationChart = OrganizationChart;
package/lib/components/OrganizationChart/OrganizationChart.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- interface OrgChartProps {
2
- openModal: boolean;
3
- setOpenModal: (openModal: boolean) => void;
4
- expertFirms: any;
5
- firstName: string;
6
- lastName: string;
7
- imageUrl?: string;
8
- primaryServiceLine: string;
9
- city: string;
10
- stateAbbreviation: string;
11
- paroTenure?: string;
12
- isPublicProfile?: boolean;
13
- }
14
- export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
15
- export {};
1
+ interface OrgChartProps {
2
+ openModal: boolean;
3
+ setOpenModal: (openModal: boolean) => void;
4
+ expertFirms: any;
5
+ firstName: string;
6
+ lastName: string;
7
+ imageUrl?: string;
8
+ primaryServiceLine: string;
9
+ city: string;
10
+ stateAbbreviation: string;
11
+ paroTenure?: string;
12
+ isPublicProfile?: boolean;
13
+ }
14
+ export declare const OrganizationChart: ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }: OrgChartProps) => JSX.Element;
15
+ export {};
package/lib/components/OrganizationChart/OrganizationChart.js CHANGED
@@ -1,39 +1,39 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.OrganizationChart = void 0;
30
- const react_1 = __importStar(require("react"));
31
- const core_1 = require("@material-ui/core");
32
- const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
33
- const Close_1 = __importDefault(require("@material-ui/icons/Close"));
34
- const cdn_1 = require("../shared/constants/cdn");
35
- const styled_components_1 = __importDefault(require("styled-components"));
36
- const defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.OrganizationChart = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const core_1 = require("@material-ui/core");
32
+ const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
33
+ const Close_1 = __importDefault(require("@material-ui/icons/Close"));
34
+ const cdn_1 = require("../shared/constants/cdn");
35
+ const styled_components_1 = __importDefault(require("styled-components"));
36
+ const defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
37
37
  const ProfilePhotoPreview = styled_components_1.default.img `
38
38
  height: 86px;
39
39
  width: 86px;
@@ -41,272 +41,272 @@ const ProfilePhotoPreview = styled_components_1.default.img `
41
41
  border-radius: 50%;
42
42
  object-fit: cover;
43
43
  object-position: top;
44
- `;
45
- const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
46
- '& .MuiDialog-paper': {
47
- backgroundColor: '#060821',
48
- width: '50vw',
49
- maxWidth: '80vw',
50
- height: '80vh',
51
- justifyContent: 'center',
52
- alignItems: 'center',
53
- overflow: 'hidden',
54
- [theme.breakpoints.down('md')]: {
55
- width: '100vw',
56
- maxWidth: '100vw',
57
- },
58
- }
59
- }));
60
- const InformationRow = ({ label, value }) => {
61
- return (react_1.default.createElement(core_1.Grid, { item: true, container: true, justify: "flex-start", alignItems: "center" },
62
- react_1.default.createElement(core_1.Box, { style: {
63
- backgroundColor: '#248384',
64
- color: 'white',
65
- textAlign: 'center',
66
- margin: '2px',
67
- padding: '4px',
68
- width: '120px',
69
- borderRadius: '6px',
70
- fontSize: '10px'
71
- } },
72
- react_1.default.createElement("b", null, label)),
73
- react_1.default.createElement(core_1.Box, { ml: 0.5 }, value !== null && value !== void 0 ? value : 'N/A')));
74
- };
75
- const EmployeeCard = ({ name, role, experience, location, imageUrl }) => {
76
- return (react_1.default.createElement(core_1.Card, { style: {
77
- backgroundColor: '#d9efef',
78
- borderRadius: '12px',
79
- width: 'max-content',
80
- padding: '4px 20px',
81
- margin: '8px'
82
- } },
83
- imageUrl && (react_1.default.createElement(core_1.Grid, { item: true, justify: "center", style: { display: 'flex', justifyContent: 'center' } },
84
- react_1.default.createElement(ProfilePhotoPreview, { src: imageUrl || defaultAvatar, alt: 'Profile Photo' }))),
85
- react_1.default.createElement(core_1.Typography, { variant: "subtitle2", align: "center" },
86
- react_1.default.createElement("b", null, name)),
87
- react_1.default.createElement(core_1.Grid, { item: true, justify: "center", alignItems: "center" },
88
- react_1.default.createElement(InformationRow, { label: "Role", value: role }),
89
- react_1.default.createElement(InformationRow, { label: "Experience", value: experience }),
90
- react_1.default.createElement(InformationRow, { label: "Location", value: location }))));
91
- };
92
- const HorizontalLine = () => (react_1.default.createElement(core_1.Grid, { item: true, alignContent: "center", style: {
93
- position: 'relative',
94
- background: '#FFFFFF',
95
- width: 'calc(105% - 1px)',
96
- height: '2px',
97
- top: 0,
98
- right: 0,
99
- left: '50%',
100
- transform: 'translateX(0)'
101
- } }));
102
- const VerticalLine = ({ isBottomLine }) => (react_1.default.createElement(core_1.Grid, { item: true, style: {
103
- position: 'relative',
104
- background: '#FFFFFF',
105
- width: '2px',
106
- height: '30px',
107
- top: 0,
108
- left: '50%',
109
- transform: 'translateX(-50%)'
110
- } }, !isBottomLine && react_1.default.createElement("div", { style: {
111
- content: '',
112
- position: 'absolute',
113
- bottom: 0,
114
- left: '50%',
115
- transform: 'translateX(-50%)',
116
- borderStyle: 'solid',
117
- borderWidth: '6px 6px 0 6px',
118
- borderColor: '#FFFFFF transparent transparent transparent'
119
- } })));
120
- const parseServices = (services) => {
121
- var _a;
122
- 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));
123
- return uniqueArray;
124
- };
125
- const checkEmployeeLocation = (data) => {
126
- let hasOffshore = false;
127
- let hasOnshore = false;
128
- data === null || data === void 0 ? void 0 : data.forEach(employee => {
129
- var _a;
130
- const location = (_a = employee === null || employee === void 0 ? void 0 : employee.employeeLocation) === null || _a === void 0 ? void 0 : _a.toLowerCase();
131
- if (location === null || location === void 0 ? void 0 : location.includes("offshore")) {
132
- hasOffshore = true;
133
- }
134
- if (location === null || location === void 0 ? void 0 : location.includes("onshore")) {
135
- hasOnshore = true;
136
- }
137
- });
138
- if (hasOffshore && hasOnshore) {
139
- return "Offshore & Onshore Team";
140
- }
141
- else if (hasOffshore) {
142
- return "Offshore Team";
143
- }
144
- else if (hasOnshore) {
145
- return "Onshore Team";
146
- }
147
- else {
148
- return "none";
149
- }
150
- };
151
- const getTotalYearsWithFirm = (data) => {
152
- return data === null || data === void 0 ? void 0 : data.reduce((total, employee) => total + employee.yearsWithFirm, 0);
153
- };
154
- const OrganizationChart = ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }) => {
155
- var _a, _b;
156
- 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 : []; });
157
- const uniqueServices = parseServices(services);
158
- const employeeLocation = checkEmployeeLocation(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
159
- const getTotalYears = getTotalYearsWithFirm(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
160
- let firmMemberCounter = 1;
161
- const groupedEmployees = (_b = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees) === null || _b === void 0 ? void 0 : _b.reduce((acc, obj) => {
162
- if (!acc[obj.level]) {
163
- acc[obj.level] = [];
164
- }
165
- acc[obj.level].push(obj);
166
- return acc;
167
- }, {});
168
- const [scale, setScale] = (0, react_1.useState)((groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? 0.3 : 0.5); // checking no of levels & zooming out to fit content
169
- const [position, setPosition] = (0, react_1.useState)({ x: 0, y: (groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? -100 : 0 }); // negative value to align content maximum zoom out and center
170
- const [isDragging, setIsDragging] = (0, react_1.useState)(false);
171
- const [lastMousePos, setLastMousePos] = (0, react_1.useState)(null);
172
- const sortedLevels = Object.keys(groupedEmployees || {})
173
- .map(Number)
174
- .sort((a, b) => a - b);
175
- const MAX_ZOOM_IN = 5;
176
- const MAX_ZOOM_OUT = 0.2;
177
- const CONTENT_SIZE = 10;
178
- // to center the content
179
- const centerContent = (newScale) => {
180
- const centerX = (CONTENT_SIZE * newScale) / 2;
181
- const centerY = (CONTENT_SIZE * newScale) / 2;
182
- setPosition({ x: centerX, y: centerY });
183
- };
184
- const handleWheel = (event) => {
185
- event.preventDefault();
186
- const zoomFactor = 0.1;
187
- if (event.deltaY < 0) {
188
- setScale((prev) => Math.min(prev + zoomFactor, MAX_ZOOM_IN));
189
- }
190
- else {
191
- setScale((prev) => {
192
- const newScale = Math.max(prev - zoomFactor, MAX_ZOOM_OUT);
193
- if (newScale === MAX_ZOOM_OUT) {
194
- centerContent(newScale); // Center content when zoomed out fully
195
- }
196
- return newScale;
197
- });
198
- }
199
- };
200
- const handleMouseDown = (event) => {
201
- setIsDragging(true);
202
- setLastMousePos({ x: event.clientX, y: event.clientY });
203
- };
204
- const handleMouseMove = (event) => {
205
- if (isDragging && lastMousePos) {
206
- const dx = event.clientX - lastMousePos.x;
207
- const dy = event.clientY - lastMousePos.y;
208
- setPosition((prev) => ({
209
- x: prev.x + dx,
210
- y: prev.y + dy,
211
- }));
212
- setLastMousePos({ x: event.clientX, y: event.clientY });
213
- }
214
- };
215
- const handleMouseUp = () => {
216
- setIsDragging(false);
217
- };
218
- // to center the content on double click
219
- const handleDoubleClick = () => {
220
- const newScale = 1;
221
- setScale(newScale);
222
- centerContent(newScale);
223
- };
224
- const highlightsExists = ((expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 || employeeLocation !== 'none' || getTotalYears > 0);
225
- const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) > 1;
226
- return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
227
- react_1.default.createElement(react_1.default.Fragment, null,
228
- react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
229
- react_1.default.createElement(core_1.Box, { p: 2 },
230
- react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
231
- react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Organizational Structure & Services")),
232
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
233
- react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "See what services the organization offers and where they're located"))),
234
- react_1.default.createElement(core_1.Box, { style: { alignSelf: 'flex-end' } },
235
- react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
236
- react_1.default.createElement(core_1.Box, { style: { color: 'white' } },
237
- react_1.default.createElement(Close_1.default, null))))),
238
- react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
239
- overflow: 'hidden',
240
- width: '100%',
241
- height: '100vh',
242
- position: 'relative',
243
- } },
244
- react_1.default.createElement("div", { onMouseDown: handleMouseDown, style: {
245
- transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
246
- transformOrigin: 'center',
247
- transition: 'transform 0.1s',
248
- width: '100%',
249
- height: '100%',
250
- position: 'relative',
251
- cursor: isDragging ? 'grabbing' : 'grab',
252
- userSelect: 'none',
253
- } },
254
- isPublicProfile ?
255
- react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "flex-start", alignItems: 'center', wrap: 'nowrap', spacing: 4, style: { width: '100%' } },
256
- react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, highlightsExists &&
257
- react_1.default.createElement(core_1.Box, null,
258
- react_1.default.createElement(core_1.Grid, { item: true },
259
- react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
260
- react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Highlights:")),
261
- react_1.default.createElement("ul", null,
262
- (expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
263
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
264
- react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, expertFirms === null || expertFirms === void 0 ? void 0 :
265
- expertFirms.employeeCount,
266
- " Team Members"))),
267
- employeeLocation !== 'none' && react_1.default.createElement("li", { style: { color: 'white' } },
268
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
269
- react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, employeeLocation))),
270
- getTotalYears > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
271
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
272
- react_1.default.createElement(core_1.Box, { style: { color: 'white', } },
273
- getTotalYears,
274
- " years of combined experience"))))))),
275
- react_1.default.createElement(core_1.Box, { style: { width: '50%' } },
276
- react_1.default.createElement(core_1.Grid, { item: true },
277
- react_1.default.createElement(core_1.Box, null,
278
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
279
- react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
280
- react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
281
- react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))))),
282
- react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, uniqueServicesExists &&
283
- react_1.default.createElement(core_1.Box, null,
284
- react_1.default.createElement(core_1.Grid, { item: true },
285
- react_1.default.createElement(core_1.Typography, { variant: "body1" },
286
- react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Services Offered:")),
287
- react_1.default.createElement("ul", null, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
288
- return react_1.default.createElement("li", { style: { color: 'white' } },
289
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
290
- react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, service)));
291
- }))))))
292
- :
293
- react_1.default.createElement(react_1.default.Fragment, null,
294
- react_1.default.createElement(core_1.Typography, { variant: "caption" },
295
- react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
296
- react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
297
- react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))), sortedLevels === null || sortedLevels === void 0 ? void 0 :
298
- sortedLevels.map((level, levelIndex) => {
299
- var _a;
300
- return (react_1.default.createElement(core_1.Grid, { item: true, key: level, justify: "center", alignItems: "center", style: { width: 'auto' } },
301
- react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justify: "center", alignItems: "center", spacing: 2, wrap: "nowrap" }, (_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.map((obj, index) => {
302
- var _a, _b, _c, _d, _e, _f;
303
- return (react_1.default.createElement(core_1.Grid, { item: true, key: obj.id, style: { flexShrink: 0 } },
304
- ((_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.length) > 1 && index < ((_b = groupedEmployees[level]) === null || _b === void 0 ? void 0 : _b.length) - 1 && (react_1.default.createElement(HorizontalLine, null)),
305
- react_1.default.createElement(VerticalLine, { isBottomLine: false }),
306
- react_1.default.createElement(EmployeeCard, { name: isPublicProfile ? `Firm Member ${firmMemberCounter++}` : obj === null || obj === void 0 ? void 0 : obj.employeeName, role: obj === null || obj === void 0 ? void 0 : obj.firmRole, experience: `${obj === null || obj === void 0 ? void 0 : obj.yearsWithFirm} years`, location: obj === null || obj === void 0 ? void 0 : obj.employeeLocation }),
307
- levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && react_1.default.createElement(VerticalLine, { isBottomLine: true }),
308
- ((_c = groupedEmployees[level]) === null || _c === void 0 ? void 0 : _c.length) > 1 && index < ((_d = groupedEmployees[level]) === null || _d === void 0 ? void 0 : _d.length) - 1 && levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && ((_e = groupedEmployees[level]) === null || _e === void 0 ? void 0 : _e.length) !== ((_f = groupedEmployees[level + 1]) === null || _f === void 0 ? void 0 : _f.length) && (react_1.default.createElement(HorizontalLine, null))));
309
- }))));
310
- }))))));
311
- };
312
- exports.OrganizationChart = OrganizationChart;
44
+ `;
45
+ const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
46
+ '& .MuiDialog-paper': {
47
+ backgroundColor: '#060821',
48
+ width: '50vw',
49
+ maxWidth: '80vw',
50
+ height: '80vh',
51
+ justifyContent: 'center',
52
+ alignItems: 'center',
53
+ overflow: 'hidden',
54
+ [theme.breakpoints.down('md')]: {
55
+ width: '100vw',
56
+ maxWidth: '100vw',
57
+ },
58
+ }
59
+ }));
60
+ const InformationRow = ({ label, value }) => {
61
+ return (react_1.default.createElement(core_1.Grid, { item: true, container: true, justify: "flex-start", alignItems: "center" },
62
+ react_1.default.createElement(core_1.Box, { style: {
63
+ backgroundColor: '#248384',
64
+ color: 'white',
65
+ textAlign: 'center',
66
+ margin: '2px',
67
+ padding: '4px',
68
+ width: '120px',
69
+ borderRadius: '6px',
70
+ fontSize: '10px'
71
+ } },
72
+ react_1.default.createElement("b", null, label)),
73
+ react_1.default.createElement(core_1.Box, { ml: 0.5 }, value !== null && value !== void 0 ? value : 'N/A')));
74
+ };
75
+ const EmployeeCard = ({ name, role, experience, location, imageUrl }) => {
76
+ return (react_1.default.createElement(core_1.Card, { style: {
77
+ backgroundColor: '#d9efef',
78
+ borderRadius: '12px',
79
+ width: 'max-content',
80
+ padding: '4px 20px',
81
+ margin: '8px'
82
+ } },
83
+ imageUrl && (react_1.default.createElement(core_1.Grid, { item: true, justify: "center", style: { display: 'flex', justifyContent: 'center' } },
84
+ react_1.default.createElement(ProfilePhotoPreview, { src: imageUrl || defaultAvatar, alt: 'Profile Photo' }))),
85
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle2", align: "center" },
86
+ react_1.default.createElement("b", null, name)),
87
+ react_1.default.createElement(core_1.Grid, { item: true, justify: "center", alignItems: "center" },
88
+ react_1.default.createElement(InformationRow, { label: "Role", value: role }),
89
+ react_1.default.createElement(InformationRow, { label: "Experience", value: experience }),
90
+ react_1.default.createElement(InformationRow, { label: "Location", value: location }))));
91
+ };
92
+ const HorizontalLine = () => (react_1.default.createElement(core_1.Grid, { item: true, alignContent: "center", style: {
93
+ position: 'relative',
94
+ background: '#FFFFFF',
95
+ width: 'calc(105% - 1px)',
96
+ height: '2px',
97
+ top: 0,
98
+ right: 0,
99
+ left: '50%',
100
+ transform: 'translateX(0)'
101
+ } }));
102
+ const VerticalLine = ({ isBottomLine }) => (react_1.default.createElement(core_1.Grid, { item: true, style: {
103
+ position: 'relative',
104
+ background: '#FFFFFF',
105
+ width: '2px',
106
+ height: '30px',
107
+ top: 0,
108
+ left: '50%',
109
+ transform: 'translateX(-50%)'
110
+ } }, !isBottomLine && react_1.default.createElement("div", { style: {
111
+ content: '',
112
+ position: 'absolute',
113
+ bottom: 0,
114
+ left: '50%',
115
+ transform: 'translateX(-50%)',
116
+ borderStyle: 'solid',
117
+ borderWidth: '6px 6px 0 6px',
118
+ borderColor: '#FFFFFF transparent transparent transparent'
119
+ } })));
120
+ const parseServices = (services) => {
121
+ var _a;
122
+ 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));
123
+ return uniqueArray;
124
+ };
125
+ const checkEmployeeLocation = (data) => {
126
+ let hasOffshore = false;
127
+ let hasOnshore = false;
128
+ data === null || data === void 0 ? void 0 : data.forEach(employee => {
129
+ var _a;
130
+ const location = (_a = employee === null || employee === void 0 ? void 0 : employee.employeeLocation) === null || _a === void 0 ? void 0 : _a.toLowerCase();
131
+ if (location === null || location === void 0 ? void 0 : location.includes("offshore")) {
132
+ hasOffshore = true;
133
+ }
134
+ if (location === null || location === void 0 ? void 0 : location.includes("onshore")) {
135
+ hasOnshore = true;
136
+ }
137
+ });
138
+ if (hasOffshore && hasOnshore) {
139
+ return "Offshore & Onshore Team";
140
+ }
141
+ else if (hasOffshore) {
142
+ return "Offshore Team";
143
+ }
144
+ else if (hasOnshore) {
145
+ return "Onshore Team";
146
+ }
147
+ else {
148
+ return "none";
149
+ }
150
+ };
151
+ const getTotalYearsWithFirm = (data) => {
152
+ return data === null || data === void 0 ? void 0 : data.reduce((total, employee) => total + employee.yearsWithFirm, 0);
153
+ };
154
+ const OrganizationChart = ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }) => {
155
+ var _a, _b;
156
+ 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 : []; });
157
+ const uniqueServices = parseServices(services);
158
+ const employeeLocation = checkEmployeeLocation(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
159
+ const getTotalYears = getTotalYearsWithFirm(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
160
+ let firmMemberCounter = 1;
161
+ const groupedEmployees = (_b = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees) === null || _b === void 0 ? void 0 : _b.reduce((acc, obj) => {
162
+ if (!acc[obj.level]) {
163
+ acc[obj.level] = [];
164
+ }
165
+ acc[obj.level].push(obj);
166
+ return acc;
167
+ }, {});
168
+ const [scale, setScale] = (0, react_1.useState)((groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? 0.3 : 0.5); // checking no of levels & zooming out to fit content
169
+ const [position, setPosition] = (0, react_1.useState)({ x: 0, y: (groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? -100 : 0 }); // negative value to align content maximum zoom out and center
170
+ const [isDragging, setIsDragging] = (0, react_1.useState)(false);
171
+ const [lastMousePos, setLastMousePos] = (0, react_1.useState)(null);
172
+ const sortedLevels = Object.keys(groupedEmployees || {})
173
+ .map(Number)
174
+ .sort((a, b) => a - b);
175
+ const MAX_ZOOM_IN = 5;
176
+ const MAX_ZOOM_OUT = 0.2;
177
+ const CONTENT_SIZE = 10;
178
+ // to center the content
179
+ const centerContent = (newScale) => {
180
+ const centerX = (CONTENT_SIZE * newScale) / 2;
181
+ const centerY = (CONTENT_SIZE * newScale) / 2;
182
+ setPosition({ x: centerX, y: centerY });
183
+ };
184
+ const handleWheel = (event) => {
185
+ event.preventDefault();
186
+ const zoomFactor = 0.1;
187
+ if (event.deltaY < 0) {
188
+ setScale((prev) => Math.min(prev + zoomFactor, MAX_ZOOM_IN));
189
+ }
190
+ else {
191
+ setScale((prev) => {
192
+ const newScale = Math.max(prev - zoomFactor, MAX_ZOOM_OUT);
193
+ if (newScale === MAX_ZOOM_OUT) {
194
+ centerContent(newScale); // Center content when zoomed out fully
195
+ }
196
+ return newScale;
197
+ });
198
+ }
199
+ };
200
+ const handleMouseDown = (event) => {
201
+ setIsDragging(true);
202
+ setLastMousePos({ x: event.clientX, y: event.clientY });
203
+ };
204
+ const handleMouseMove = (event) => {
205
+ if (isDragging && lastMousePos) {
206
+ const dx = event.clientX - lastMousePos.x;
207
+ const dy = event.clientY - lastMousePos.y;
208
+ setPosition((prev) => ({
209
+ x: prev.x + dx,
210
+ y: prev.y + dy,
211
+ }));
212
+ setLastMousePos({ x: event.clientX, y: event.clientY });
213
+ }
214
+ };
215
+ const handleMouseUp = () => {
216
+ setIsDragging(false);
217
+ };
218
+ // to center the content on double click
219
+ const handleDoubleClick = () => {
220
+ const newScale = 1;
221
+ setScale(newScale);
222
+ centerContent(newScale);
223
+ };
224
+ const highlightsExists = ((expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 || employeeLocation !== 'none' || getTotalYears > 0);
225
+ const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) > 1;
226
+ return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
227
+ react_1.default.createElement(react_1.default.Fragment, null,
228
+ react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
229
+ react_1.default.createElement(core_1.Box, { p: 2 },
230
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
231
+ react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Organizational Structure & Services")),
232
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
233
+ react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "See what services the organization offers and where they're located"))),
234
+ react_1.default.createElement(core_1.Box, { style: { alignSelf: 'flex-end' } },
235
+ react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
236
+ react_1.default.createElement(core_1.Box, { style: { color: 'white' } },
237
+ react_1.default.createElement(Close_1.default, null))))),
238
+ react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
239
+ overflow: 'hidden',
240
+ width: '100%',
241
+ height: '100vh',
242
+ position: 'relative',
243
+ } },
244
+ react_1.default.createElement("div", { onMouseDown: handleMouseDown, style: {
245
+ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
246
+ transformOrigin: 'center',
247
+ transition: 'transform 0.1s',
248
+ width: '100%',
249
+ height: '100%',
250
+ position: 'relative',
251
+ cursor: isDragging ? 'grabbing' : 'grab',
252
+ userSelect: 'none',
253
+ } },
254
+ isPublicProfile ?
255
+ react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "flex-start", alignItems: 'center', wrap: 'nowrap', spacing: 4, style: { width: '100%' } },
256
+ react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, highlightsExists &&
257
+ react_1.default.createElement(core_1.Box, null,
258
+ react_1.default.createElement(core_1.Grid, { item: true },
259
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
260
+ react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Highlights:")),
261
+ react_1.default.createElement("ul", null,
262
+ (expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
263
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
264
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, expertFirms === null || expertFirms === void 0 ? void 0 :
265
+ expertFirms.employeeCount,
266
+ " Team Members"))),
267
+ employeeLocation !== 'none' && react_1.default.createElement("li", { style: { color: 'white' } },
268
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
269
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, employeeLocation))),
270
+ getTotalYears > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
271
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
272
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', } },
273
+ getTotalYears,
274
+ " years of combined experience"))))))),
275
+ react_1.default.createElement(core_1.Box, { style: { width: '50%' } },
276
+ react_1.default.createElement(core_1.Grid, { item: true },
277
+ react_1.default.createElement(core_1.Box, null,
278
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
279
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
280
+ react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
281
+ react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))))),
282
+ react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, uniqueServicesExists &&
283
+ react_1.default.createElement(core_1.Box, null,
284
+ react_1.default.createElement(core_1.Grid, { item: true },
285
+ react_1.default.createElement(core_1.Typography, { variant: "body1" },
286
+ react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Services Offered:")),
287
+ react_1.default.createElement("ul", null, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
288
+ return react_1.default.createElement("li", { style: { color: 'white' } },
289
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
290
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, service)));
291
+ }))))))
292
+ :
293
+ react_1.default.createElement(react_1.default.Fragment, null,
294
+ react_1.default.createElement(core_1.Typography, { variant: "caption" },
295
+ react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
296
+ react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
297
+ react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))), sortedLevels === null || sortedLevels === void 0 ? void 0 :
298
+ sortedLevels.map((level, levelIndex) => {
299
+ var _a;
300
+ return (react_1.default.createElement(core_1.Grid, { item: true, key: level, justify: "center", alignItems: "center", style: { width: 'auto' } },
301
+ react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justify: "center", alignItems: "center", spacing: 2, wrap: "nowrap" }, (_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.map((obj, index) => {
302
+ var _a, _b, _c, _d, _e, _f;
303
+ return (react_1.default.createElement(core_1.Grid, { item: true, key: obj.id, style: { flexShrink: 0 } },
304
+ ((_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.length) > 1 && index < ((_b = groupedEmployees[level]) === null || _b === void 0 ? void 0 : _b.length) - 1 && (react_1.default.createElement(HorizontalLine, null)),
305
+ react_1.default.createElement(VerticalLine, { isBottomLine: false }),
306
+ react_1.default.createElement(EmployeeCard, { name: isPublicProfile ? `Firm Member ${firmMemberCounter++}` : obj === null || obj === void 0 ? void 0 : obj.employeeName, role: obj === null || obj === void 0 ? void 0 : obj.firmRole, experience: `${obj === null || obj === void 0 ? void 0 : obj.yearsWithFirm} years`, location: obj === null || obj === void 0 ? void 0 : obj.employeeLocation }),
307
+ levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && react_1.default.createElement(VerticalLine, { isBottomLine: true }),
308
+ ((_c = groupedEmployees[level]) === null || _c === void 0 ? void 0 : _c.length) > 1 && index < ((_d = groupedEmployees[level]) === null || _d === void 0 ? void 0 : _d.length) - 1 && levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && ((_e = groupedEmployees[level]) === null || _e === void 0 ? void 0 : _e.length) !== ((_f = groupedEmployees[level + 1]) === null || _f === void 0 ? void 0 : _f.length) && (react_1.default.createElement(HorizontalLine, null))));
309
+ }))));
310
+ }))))));
311
+ };
312
+ exports.OrganizationChart = OrganizationChart;
package/lib/components/OrganizationChart/PersonCard.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ export interface EmployeeData {
3
+ name: string;
4
+ position: string;
5
+ experience: number;
6
+ location: string;
7
+ initial: string;
8
+ level?: number | null;
9
+ children?: EmployeeData[];
10
+ }
11
+ interface PersonCardProps extends EmployeeData {
12
+ noOfchildren: number;
13
+ }
14
+ declare const PersonCard: React.FC<PersonCardProps>;
15
+ export default PersonCard;
package/lib/components/OrganizationChart/PersonCard.js ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
8
+ react_1.default.createElement("div", { className: "flex flex-col items-center" },
9
+ react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
10
+ react_1.default.createElement("div", { className: `
11
+ -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center
12
+ text-white font-semibold text-lg
13
+ transition-all duration-200 hover:bg-[#102377]
14
+ ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
15
+ ` },
16
+ initial,
17
+ 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)))),
18
+ 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" },
19
+ react_1.default.createElement("div", { className: "font-semibold text-[#102377]" }, name),
20
+ react_1.default.createElement("div", { className: "text-sm text-gray-600" }, position),
21
+ react_1.default.createElement("div", { className: "text-xs text-gray-500" },
22
+ experience,
23
+ " Years Experience"),
24
+ react_1.default.createElement("div", { className: "text-xs text-gray-500" }, location)))));
25
+ exports.default = PersonCard;
package/lib/components/OrganizationChart/ServicesCard.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const ServicesCard: ({ uniqueServices, employeeCount, employeeLocation, totalYears }: any) => React.JSX.Element;
3
+ export default ServicesCard;
package/lib/components/OrganizationChart/ServicesCard.js ADDED
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ const react_1 = __importStar(require("react"));
27
+ const core_1 = require("@material-ui/core");
28
+ const icons_1 = require("@material-ui/icons");
29
+ const utils_1 = require("./utils");
30
+ const ServicesCard = ({ uniqueServices, employeeCount, employeeLocation, totalYears }) => {
31
+ const [expanded, setExpanded] = (0, react_1.useState)(false);
32
+ const handleExpandClick = () => {
33
+ setExpanded((prev) => !prev);
34
+ };
35
+ const highlightsExists = (employeeCount > 0 || employeeLocation !== 'none' || totalYears > 0);
36
+ const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) >= 1;
37
+ const theme = (0, core_1.useTheme)();
38
+ const smallScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('lg'));
39
+ return (highlightsExists || uniqueServicesExists) ? react_1.default.createElement(utils_1.InfoCard, null,
40
+ react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: 'row', justifyContent: 'space-between', alignItems: 'center' },
41
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
42
+ react_1.default.createElement("b", null, "Services Offered & Highlights")),
43
+ react_1.default.createElement(core_1.Tooltip, { title: !expanded ? "Expand to view services offered & highlights" : "", arrow: true, placement: 'top' },
44
+ 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)))),
45
+ react_1.default.createElement(core_1.Collapse, { in: expanded },
46
+ react_1.default.createElement(core_1.Grid, { container: true, spacing: 2, style: { paddingLeft: 12 }, direction: smallScreen ? 'column' : 'row' },
47
+ uniqueServicesExists && react_1.default.createElement(core_1.Grid, { item: true },
48
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
49
+ react_1.default.createElement("b", null, "Services Offered")),
50
+ react_1.default.createElement("ul", { className: "pl-2 my-0" }, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
51
+ return react_1.default.createElement("li", null, service);
52
+ }))),
53
+ react_1.default.createElement(core_1.Box, { m: 1, mb: smallScreen ? 1 : 2 },
54
+ react_1.default.createElement(core_1.Divider, { orientation: smallScreen ? 'horizontal' : 'vertical' })),
55
+ highlightsExists && react_1.default.createElement(core_1.Grid, { item: true },
56
+ react_1.default.createElement(core_1.Typography, { variant: "subtitle1", gutterBottom: true },
57
+ react_1.default.createElement("b", null, "Highlights")),
58
+ react_1.default.createElement("ul", { className: "pl-2 my-0" },
59
+ employeeCount > 0 && react_1.default.createElement("li", null,
60
+ employeeCount,
61
+ " Team Members"),
62
+ employeeLocation !== 'none' && react_1.default.createElement("li", null, employeeLocation),
63
+ totalYears > 0 && react_1.default.createElement("li", null,
64
+ totalYears,
65
+ " years of combined experience")))))) : react_1.default.createElement(react_1.default.Fragment, null);
66
+ };
67
+ exports.default = ServicesCard;
package/lib/components/OrganizationChart/utils.js CHANGED
@@ -7,54 +7,6 @@ exports.getTotalYearsWithFirm = exports.checkEmployeeLocation = exports.parseSer
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
8
  const core_1 = require("@material-ui/core");
9
9
  const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
10
- // export const transformEmployeeData = (
11
- // employeeData: Employee[],
12
- // firstName: string,
13
- // lastName: string,
14
- // primaryServiceLine: string,
15
- // city: string,
16
- // stateAbbreviation: string,
17
- // paroTenure: number
18
- // ) => {
19
- // const getInitial = (name: string): string => name.charAt(0).toUpperCase();
20
- // // // Organize employees by their level
21
- // // const levels: { [key: number]: Employee[] } = {};
22
- // // employeeData.forEach((employee) => {
23
- // // if (!levels[employee.level]) {
24
- // // levels[employee.level] = [];
25
- // // }
26
- // // levels[employee.level].push(employee);
27
- // // });
28
- // const buildHierarchy = (parent: Employee | null, level: number): TransformedEmployee[] => {
29
- // // if (!levels[level]) return [];
30
- // // Filter employees based on matching direct_report and expert_firm_id with the parent
31
- // const children = employeeData.filter((employee) => {
32
- // return (parent === null ||
33
- // (employee.directReport === parent.employeeName &&
34
- // employee.expertFirmId === parent.expertFirmId));
35
- // }).map((employee) => ({
36
- // name: employee.employeeName,
37
- // position: employee.firmRole,
38
- // experience: employee.yearsWithFirm,
39
- // location: employee.employeeLocation,
40
- // initial: getInitial(employee.employeeName),
41
- // level: level,
42
- // children: buildHierarchy(employee, level + 1), // Recursive call to get the next level of children
43
- // }));
44
- // return children;
45
- // };
46
- // // Start building hierarchy from level 1 (assuming the top-most level is level 1)
47
- // const transformedData = buildHierarchy(null, 1);
48
- // return {
49
- // name: `${firstName} ${lastName}`,
50
- // position: primaryServiceLine,
51
- // experience: paroTenure,
52
- // location: `${city}, ${stateAbbreviation}`,
53
- // initial: firstName.charAt(0).toUpperCase(),
54
- // level: 0,
55
- // children: transformedData,
56
- // };
57
- // };
58
10
  const transformEmployeeData = (employeeData, firstName, lastName, primaryServiceLine, city, stateAbbreviation, paroTenure) => {
59
11
  const getInitial = (name) => name.charAt(0).toUpperCase();
60
12
  const buildHierarchy = (parent) => {
package/lib/components/ProfileCompletedPercentange/ProfileCompletedPercentage.d.ts CHANGED
@@ -2,6 +2,7 @@ interface ProfileCompletedPercentageProps {
2
2
  preferenceTasks: any[];
3
3
  isWhiteLabel: boolean;
4
4
  detailsSectionCompleted: boolean;
5
+ clientReferencesSectionCompleted: boolean;
5
6
  }
6
- export declare const ProfileCompletedPercentage: ({ preferenceTasks, isWhiteLabel, detailsSectionCompleted }: ProfileCompletedPercentageProps) => JSX.Element;
7
+ export declare const ProfileCompletedPercentage: ({ preferenceTasks, isWhiteLabel, detailsSectionCompleted, clientReferencesSectionCompleted }: ProfileCompletedPercentageProps) => JSX.Element;
7
8
  export {};
package/lib/components/ProfileCompletedPercentange/ProfileCompletedPercentage.js CHANGED
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ProfileCompletedPercentage = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const ProfileCompletedPercentage = ({ preferenceTasks, isWhiteLabel, detailsSectionCompleted }) => {
8
+ const ProfileCompletedPercentage = ({ preferenceTasks, isWhiteLabel, detailsSectionCompleted, clientReferencesSectionCompleted }) => {
9
9
  const taskPercentages = {
10
10
  'upcoming 3 months weekly goal hours': 7.5,
11
11
  'current months weekly goal hours': 7.5,
@@ -26,6 +26,9 @@ const ProfileCompletedPercentage = ({ preferenceTasks, isWhiteLabel, detailsSect
26
26
  if (detailsSectionCompleted === true) {
27
27
  totalPercentage += 10;
28
28
  }
29
+ if (clientReferencesSectionCompleted === true) {
30
+ totalPercentage += 20;
31
+ }
29
32
  preferenceTasks === null || preferenceTasks === void 0 ? void 0 : preferenceTasks.forEach((i) => {
30
33
  if ((i === null || i === void 0 ? void 0 : i.completed) === true) {
31
34
  if (Object.keys(taskPercentages).includes(i.description)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paro.io/expert-shared-components",
3
- "version": "1.9.3",
3
+ "version": "1.9.5",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {