@atlaskit/profilecard 24.13.7 → 24.14.1

package/dist/es2019/components/User/ProfileCard.js

@@ -5,12 +5,14 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
 import { LinkButton } from '@atlaskit/button/new';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Spinner from '@atlaskit/spinner';
+import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import { N0 } from '@atlaskit/theme/colors';
 import messages from '../../messages';
 import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, AnimationWrapper, CardContainer, CardContent, KudosBlobAnimation, ProfileImage } from '../../styled/Card';
 import { CardWrapper, SpinnerContainer } from '../../styled/UserTrigger';
-import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
+import { actionClicked, fireEvent, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { getPageTime } from '../../util/performance';
 import { ErrorMessage } from '../Error';
@@ -54,6 +56,9 @@ export const ProfilecardInternal = props => {
   const {
     createAnalyticsEvent
   } = props;
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEvents();
   const fireAnalytics = useCallback(payload => {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, payload);
@@ -64,6 +69,11 @@ export const ProfilecardInternal = props => {
     const event = generator(elapsed);
     fireAnalytics(event);
   }, [fireAnalytics, openTime]);
+  const fireAnalyticsWithDurationNext = useCallback((eventKey, generator) => {
+    const duration = getPageTime() - openTime;
+    const attributes = generator(duration);
+    fireEventNext(eventKey, attributes);
+  }, [openTime, fireEventNext]);
   const {
     kudosAction
   } = useKudos(props.cloudId, props.userId, props.teamCentralBaseUrl, props.openKudosDrawer);
@@ -87,22 +97,33 @@ export const ProfilecardInternal = props => {
   const canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
   useEffect(() => {
     if (canRender) {
-      fireAnalyticsWithDuration(duration => profileCardRendered('user', 'content', {
-        duration,
-        numActions: realActions.length
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.rendered.content', duration => ({
+          duration,
+          numActions: realActions.length,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        }));
+      } else {
+        fireAnalyticsWithDuration(duration => profileCardRendered('user', 'content', {
+          duration,
+          numActions: realActions.length
+        }));
+      }
     }
-  }, [canRender, fireAnalyticsWithDuration, realActions]);
+  }, [canRender, fireAnalyticsWithDuration, fireAnalyticsWithDurationNext, realActions]);
   if (hasError) {
     return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       reload: props.clientFetchProfile,
       errorType: props.errorType || null,
-      fireAnalytics: fireAnalytics
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireEventNext
     }));
   }
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(LoadingView, {
-      fireAnalyticsWithDuration: fireAnalyticsWithDuration
+      fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+      fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
     }));
   }
   if (!canRender) {
@@ -118,35 +139,51 @@ export const ProfilecardInternal = props => {
     borderColor: `var(--ds-shadow-overlay, ${N0})`
   })), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(ProfileCardDetails, _extends({}, props, {
     status: status,
-    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, _extends({}, fg('jfp_a11y_team_profile_card_actions_label') && {
     fullName
   }, {
     fullName: fullName,
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
-    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
 const Actions = ({
   actions,
   fireAnalyticsWithDuration,
+  fireAnalyticsWithDurationNext,
   isTriggeredUsingKeyboard,
   fullName
 }) => {
   const onActionClick = useCallback((action, args, event, index) => {
-    fireAnalyticsWithDuration(duration => actionClicked('user', {
-      duration,
-      hasHref: !!action.link,
-      hasOnClick: !!action.callback,
-      index,
-      actionId: action.id || 'no-id-specified'
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.action', duration => ({
+        method: 'click',
+        firedAt: Math.round(getPageTime()),
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || 'no-id-specified',
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => actionClicked('user', {
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || 'no-id-specified'
+      }));
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       action.callback(event, ...args);
     }
-  }, [fireAnalyticsWithDuration]);
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -175,21 +212,31 @@ const Actions = ({
   }), overflowActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, _extends({
     actions: overflowActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext,
     onItemClick: (action, args, event, index) => onActionClick(action, args, event, index + ACTION_OVERFLOW_THRESHOLD)
   }, fg('jfp_a11y_team_profile_card_actions_label') && {
     fullName
   })));
 };
-const LoadingView = ({
-  fireAnalyticsWithDuration
+export const LoadingView = ({
+  fireAnalyticsWithDuration,
+  fireAnalyticsWithDurationNext
 }) => {
   useEffect(() => {
-    fireAnalyticsWithDuration(duration => profileCardRendered('user', 'spinner', {
-      duration
-    }));
-  }, [fireAnalyticsWithDuration]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.rendered.spinner', duration => ({
+        firedAt: Math.round(getPageTime()),
+        duration,
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => profileCardRendered('user', 'spinner', {
+        duration
+      }));
+    }
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, {
     testId: "profilecard-spinner-container"
   }, /*#__PURE__*/React.createElement(Spinner, null));
 };
-export default withAnalyticsEvents()(ProfilecardInternal);
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', ProfilecardInternal, withAnalyticsEvents()(ProfilecardInternal));

package/dist/es2019/components/User/ProfileCardDetails.compiled.css

@@ -5,7 +5,6 @@
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
-._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1hpmutpp#profilecard-name-label{margin-top:var(--ds-space-150,9pt)}

package/dist/es2019/components/User/ProfileCardDetails.js

@@ -7,16 +7,13 @@ import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Text } from '@atlaskit/primitives';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
 import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
 import { IconLabel } from '../Icon';
 import ReportingLinesDetails from './ReportingLinesDetails';
 const styles = {
-  detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",
@@ -137,6 +134,7 @@ export const ProfileCardDetails = props => {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,
     onReportingLinesClick: props.onReportingLinesClick,
-    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: props.fireAnalyticsWithDurationNext
   }));
 };

package/dist/es2019/components/User/ProfileCardResourced.js

@@ -3,6 +3,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Suspense } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import filterActions from '../../internal/filterActions';
 import { CardWrapper } from '../../styled/UserTrigger';
 import { fireEvent } from '../../util/analytics';
@@ -33,6 +35,15 @@ class ProfileCardResourced extends React.PureComponent {
         fireEvent(this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(this, "fireAnalyticsNext", (eventKey, ...attributes) => {
+      // Don't fire analytics if the component is unmounted
+      if (!this._isMounted) {
+        return;
+      }
+      if (this.props.fireEvent) {
+        this.props.fireEvent(eventKey, ...attributes);
+      }
+    });
     _defineProperty(this, "clientFetchProfile", () => {
       const {
         cloudId,
@@ -50,7 +61,7 @@ class ProfileCardResourced extends React.PureComponent {
         hasError: false,
         data: null
       }, () => {
-        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId, userId, this.fireAnalytics), this.props.resourceClient.getReportingLines(userId), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
+        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId, userId, this.fireAnalytics, this.fireAnalyticsNext), this.props.resourceClient.getReportingLines(userId), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
           withOrgContext: true,
           withSiteContext: true
         })]);
@@ -130,7 +141,8 @@ class ProfileCardResourced extends React.PureComponent {
     const isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
     if (isFetchingOrNotStartToFetchYet) {
       return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(UserLoadingState, {
-        fireAnalytics: this.fireAnalytics
+        fireAnalytics: this.fireAnalytics,
+        fireAnalyticsNext: this.fireAnalyticsNext
       }));
     } else if (hasError) {
       return /*#__PURE__*/React.createElement(CardWrapper, {
@@ -138,7 +150,8 @@ class ProfileCardResourced extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         errorType: error,
         reload: this.clientFetchProfile,
-        fireAnalytics: this.fireAnalytics
+        fireAnalytics: this.fireAnalytics,
+        fireAnalyticsNext: this.fireAnalyticsNext
       }));
     }
     const newProps = {
@@ -177,4 +190,12 @@ _defineProperty(ProfileCardResourced, "defaultProps", {
   actions: []
 });
 export const ProfileCardResourcedInternal = ProfileCardResourced;
-export default withAnalyticsEvents()(ProfileCardResourced);
+const ProfileCardResourcedWithAnalytics = props => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(ProfileCardResourced, _extends({
+    fireEvent: fireEvent
+  }, props));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', ProfileCardResourcedWithAnalytics, withAnalyticsEvents()(ProfileCardResourced));

package/dist/es2019/components/User/ProfileCardTrigger.js

@@ -9,12 +9,14 @@ import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { Box } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
 import filterActionsInner from '../../internal/filterActions';
 import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/UserTrigger';
-import { cardTriggered, fireEvent } from '../../util/analytics';
+import { cardTriggered, fireEvent, PACKAGE_META_DATA } from '../../util/analytics';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
+import { getPageTime } from '../../util/performance';
 import { AgentProfileCardResourced } from '../Agent/AgentProfileCardResourced';
 import { ProfileCardLazy } from './lazyProfileCard';
 import UserLoadingState from './UserLoadingState';
@@ -105,6 +107,9 @@ export default function ProfilecardTriggerNext({
   const [kudosDrawerOpen, setKudosDrawerOpen] = useState(false);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const triggerRef = useRef(null);
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   useEffect(() => {
     isMounted.current = true;
     return () => {
@@ -123,6 +128,14 @@ export default function ProfilecardTriggerNext({
     setShouldShowGiveKudos(false);
     setTeamCentralBaseUrl(undefined);
   }, [userId]);
+
+  // Create a wrapper function that has the same interface as fireEventNext but includes isMounted check
+  const fireAnalyticsNext = useCallback((eventKey, ...attributes) => {
+    if (!isMounted.current) {
+      return;
+    }
+    fireEventNext(eventKey, ...attributes);
+  }, [fireEventNext]);
   const fireAnalytics = useCallback(payload => {
     // Don't fire any analytics if the component is unmounted
     if (!isMounted.current) {
@@ -180,7 +193,7 @@ export default function ProfilecardTriggerNext({
     setError(null);
     setData(null);
     try {
-      const requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
+      const requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics, fireAnalyticsNext), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
         withOrgContext: true,
         withSiteContext: true
       })]);
@@ -189,7 +202,7 @@ export default function ProfilecardTriggerNext({
     } catch (err) {
       handleClientError(err);
     }
-  }, [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
+  }, [cloudId, fireAnalytics, fireAnalyticsNext, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   const showProfilecard = useCallback(() => {
     clearTimeout(hideTimer.current);
     clearTimeout(showTimer.current);
@@ -208,25 +221,49 @@ export default function ProfilecardTriggerNext({
     event.stopPropagation();
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'click'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', {
+          method: 'click',
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        });
+      } else {
+        fireAnalytics(cardTriggered('user', 'click'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   const onMouseEnter = useCallback(() => {
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'hover'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', {
+          method: 'hover',
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        });
+      } else {
+        fireAnalytics(cardTriggered('user', 'hover'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   const onKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
-        fireAnalytics(cardTriggered('user', 'click'));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          fireAnalyticsNext('ui.profilecard.triggered', {
+            method: 'click',
+            firedAt: Math.round(getPageTime()),
+            ...PACKAGE_META_DATA
+          });
+        } else {
+          fireAnalytics(cardTriggered('user', 'click'));
+        }
       }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   const onFocus = useCallback(() => {
     showProfilecard();
   }, [showProfilecard]);
@@ -301,7 +338,8 @@ export default function ProfilecardTriggerNext({
       placement: position,
       offset: offset !== null && offset !== void 0 ? offset : [0, 8],
       content: () => /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
-        fireAnalytics: fireAnalytics
+        fireAnalytics: fireAnalytics,
+        fireAnalyticsNext: fireAnalyticsNext
       }) : visible && /*#__PURE__*/React.createElement(ProfileCardContent, {
         profilecardProps: profilecardProps,
         isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -378,7 +416,8 @@ export default function ProfilecardTriggerNext({
     placement: position,
     offset: offset !== null && offset !== void 0 ? offset : [0, 8],
     content: () => /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
-      fireAnalytics: fireAnalytics
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireAnalyticsNext
     }) : visible && /*#__PURE__*/React.createElement(ProfileCardContent, {
       profilecardProps: profilecardProps,
       isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -447,9 +486,11 @@ export default function ProfilecardTriggerNext({
   })));
 }
 const LoadingView = ({
-  fireAnalytics
+  fireAnalytics,
+  fireAnalyticsNext
 }) => /*#__PURE__*/React.createElement(CardWrapper, {
   testId: "profilecard.profilecardtrigger.loading"
 }, /*#__PURE__*/React.createElement(UserLoadingState, {
-  fireAnalytics: fireAnalytics
+  fireAnalytics: fireAnalytics,
+  fireAnalyticsNext: fireAnalyticsNext
 }));

package/dist/es2019/components/User/ReportingLinesDetails.js

@@ -5,12 +5,16 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
-import { reportingLinesClicked } from '../../util/analytics';
+import { PACKAGE_META_DATA, reportingLinesClicked } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
+import { default as ReportingLinesDetailsCompiled } from './ReportingLinesDetailsCompiled';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -34,6 +38,7 @@ const ReportingLinesDetails = props => {
   } = useIntl();
   const {
     fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext,
     reportingLines = {},
     reportingLinesProfileUrl,
     onReportingLinesClick
@@ -45,10 +50,19 @@ const ReportingLinesDetails = props => {
   const manager = managers.length >= 1 ? managers[0] : undefined;
   const hasReports = reports.length > 0;
   const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     onReportingLinesClick(user);
   } : undefined;
   const onReportingLinksClick = (user, userType, href) => {
@@ -56,10 +70,19 @@ const ReportingLinesDetails = props => {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     if (shouldPreventDefault) {
       return;
     }
@@ -101,4 +124,5 @@ const ReportingLinesDetails = props => {
     showMoreButtonProps: showMoreButtonProps
   })));
 };
-export default ReportingLinesDetails;
+const ReportingLinesDetailsExport = componentWithFG('profilecard_primitives_compiled', ReportingLinesDetailsCompiled, ReportingLinesDetails);
+export default ReportingLinesDetailsExport;

package/dist/es2019/components/User/ReportingLinesDetailsCompiled.compiled.css

@@ -0,0 +1,11 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/es2019/components/User/ReportingLinesDetailsCompiled.js

@@ -0,0 +1,96 @@
+/* ReportingLinesDetailsCompiled.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ReportingLinesDetailsCompiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { cx } from '@atlaskit/css';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import messages from '../../messages';
+import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
+import { reportingLinesClicked } from '../../util/analytics';
+function getProfileHref(userId, profileUrl) {
+  return profileUrl ? profileUrl + userId : undefined;
+}
+const styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n",
+  reportingLinesHeadingDefaultStyles: "_11c81vhk _syaz1fxt _k48p1pd9 _otyru2gc",
+  reportingLinesHeadingStyles: "_otyrze3t"
+};
+const avatarGroupMaxCount = 5;
+const ReportingLinesDetails = props => {
+  var _manager$pii, _manager$pii2;
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireAnalyticsWithDuration,
+    reportingLines = {},
+    reportingLinesProfileUrl,
+    onReportingLinesClick
+  } = props;
+  const {
+    managers = [],
+    reports = []
+  } = reportingLines;
+  const manager = managers.length >= 1 ? managers[0] : undefined;
+  const hasReports = reports.length > 0;
+  const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
+    fireAnalyticsWithDuration(duration => reportingLinesClicked({
+      duration,
+      userType
+    }));
+    onReportingLinesClick(user);
+  } : undefined;
+  const onReportingLinksClick = (user, userType, href) => {
+    let shouldPreventDefault = false;
+    if (onReportingLinesClick) {
+      shouldPreventDefault = onReportingLinesClick(user) === false;
+    }
+    fireAnalyticsWithDuration(duration => reportingLinesClicked({
+      duration,
+      userType
+    }));
+    if (shouldPreventDefault) {
+      return;
+    }
+    if (href) {
+      window.location.href = href;
+    }
+  };
+  const showMoreButtonProps = {
+    'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
+      count: reports.length - avatarGroupMaxCount + 1
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.reportingLinesHeadingDefaultStyles, styles.reportingLinesHeadingStyles)
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+    onClick: () => onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl)),
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xsmall",
+    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    size: "small",
+    data: reports.map(member => {
+      var _member$pii, _member$pii2;
+      return {
+        key: member.accountIdentifier,
+        name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
+        src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
+        href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
+        onClick: getReportingLinesOnClick(member, 'direct-report')
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    testId: "profilecard-reports-avatar-group",
+    showMoreButtonProps: showMoreButtonProps
+  })));
+};
+export default ReportingLinesDetails;

package/dist/es2019/components/User/UserLoadingState.js

@@ -1,13 +1,23 @@
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkSpinner from '@atlaskit/spinner';
 import { SpinnerContainer } from '../../styled/UserTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 const UserLoadingState = ({
-  fireAnalytics
+  fireAnalytics,
+  fireAnalyticsNext
 }) => {
   useEffect(() => {
-    fireAnalytics(profileCardRendered('user', 'spinner'));
-  }, [fireAnalytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.spinner', {
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      });
+    } else {
+      fireAnalytics(profileCardRendered('user', 'spinner'));
+    }
+  }, [fireAnalytics, fireAnalyticsNext]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };
 export default UserLoadingState;