@atlaskit/profilecard 24.13.6 → 24.14.0

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

@@ -1,18 +1,23 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 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';
@@ -58,6 +63,8 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     _useState2 = _slicedToArray(_useState, 1),
     openTime = _useState2[0];
   var createAnalyticsEvent = props.createAnalyticsEvent;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEventNext = _useAnalyticsEvents.fireEvent;
   var fireAnalytics = useCallback(function (payload) {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, payload);
@@ -68,6 +75,11 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     var event = generator(elapsed);
     fireAnalytics(event);
   }, [fireAnalytics, openTime]);
+  var fireAnalyticsWithDurationNext = useCallback(function (eventKey, generator) {
+    var duration = getPageTime() - openTime;
+    var attributes = generator(duration);
+    fireEventNext(eventKey, attributes);
+  }, [openTime, fireEventNext]);
   var _useKudos = useKudos(props.cloudId, props.userId, props.teamCentralBaseUrl, props.openKudosDrawer),
     kudosAction = _useKudos.kudosAction;
   var _props$actions = props.actions,
@@ -88,24 +100,36 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
   var canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
   useEffect(function () {
     if (canRender) {
-      fireAnalyticsWithDuration(function (duration) {
-        return profileCardRendered('user', 'content', {
-          duration: duration,
-          numActions: realActions.length
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.rendered.content', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: realActions.length,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return profileCardRendered('user', 'content', {
+            duration: 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) {
@@ -121,36 +145,53 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     borderColor: "var(--ds-shadow-overlay, ".concat(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: fullName,
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
-    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
 var Actions = function Actions(_ref) {
   var actions = _ref.actions,
     fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = _ref.fireAnalyticsWithDurationNext,
     isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard,
     fullName = _ref.fullName;
   var onActionClick = useCallback(function (action, args, event, index) {
-    fireAnalyticsWithDuration(function (duration) {
-      return actionClicked('user', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || 'no-id-specified'
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.action', function (duration) {
+        return _objectSpread({
+          method: 'click',
+          firedAt: Math.round(getPageTime()),
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return actionClicked('user', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        });
+      });
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       action.callback.apply(action, [event].concat(_toConsumableArray(args)));
     }
-  }, [fireAnalyticsWithDuration]);
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -184,6 +225,7 @@ var Actions = function Actions(_ref) {
   }), overflowActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, _extends({
     actions: overflowActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext,
     onItemClick: function onItemClick(action, args, event, index) {
       return onActionClick(action, args, event, index + ACTION_OVERFLOW_THRESHOLD);
     }
@@ -191,17 +233,27 @@ var Actions = function Actions(_ref) {
     fullName: fullName
   })));
 };
-var LoadingView = function LoadingView(_ref2) {
-  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration;
+export var LoadingView = function LoadingView(_ref2) {
+  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = _ref2.fireAnalyticsWithDurationNext;
   useEffect(function () {
-    fireAnalyticsWithDuration(function (duration) {
-      return profileCardRendered('user', 'spinner', {
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.rendered.spinner', function (duration) {
+        return _objectSpread({
+          firedAt: Math.round(getPageTime()),
+          duration: duration
+        }, PACKAGE_META_DATA);
+      });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return profileCardRendered('user', 'spinner', {
+          duration: duration
+        });
       });
-    });
-  }, [fireAnalyticsWithDuration]);
+    }
+  }, [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/esm/components/User/ProfileCardDetails.js

@@ -1,4 +1,4 @@
-/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text"];
@@ -134,6 +134,7 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,
     onReportingLinesClick: props.onReportingLinesClick,
-    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: props.fireAnalyticsWithDurationNext
   }));
 };

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

@@ -13,6 +13,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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';
@@ -48,10 +50,23 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         fireEvent(_this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(_this, "fireAnalyticsNext", function (eventKey) {
+      // Don't fire analytics if the component is unmounted
+      if (!_this._isMounted) {
+        return;
+      }
+      if (_this.props.fireEvent) {
+        var _this$props;
+        for (var _len2 = arguments.length, attributes = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          attributes[_key2 - 1] = arguments[_key2];
+        }
+        (_this$props = _this.props).fireEvent.apply(_this$props, [eventKey].concat(attributes));
+      }
+    });
     _defineProperty(_this, "clientFetchProfile", function () {
-      var _this$props = _this.props,
-        cloudId = _this$props.cloudId,
-        userId = _this$props.userId;
+      var _this$props2 = _this.props,
+        cloudId = _this$props2.cloudId,
+        userId = _this$props2.userId;
       var isLoading = _this.state.isLoading;
       if (isLoading === true) {
         // don't fetch data when fetching is in process
@@ -62,7 +77,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId, _this.fireAnalytics), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
+        var 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
         })]);
@@ -101,10 +116,10 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props2 = this.props,
-        userId = _this$props2.userId,
-        cloudId = _this$props2.cloudId,
-        resourceClient = _this$props2.resourceClient;
+      var _this$props3 = this.props,
+        userId = _this$props3.userId,
+        cloudId = _this$props3.cloudId,
+        resourceClient = _this$props3.resourceClient;
       if (userId !== prevProps.userId || cloudId !== prevProps.cloudId || resourceClient !== prevProps.resourceClient) {
         this.setState({
           isLoading: undefined
@@ -154,15 +169,16 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         reportingLinesData = _this$state.reportingLinesData,
         isKudosEnabled = _this$state.isKudosEnabled,
         teamCentralBaseUrl = _this$state.teamCentralBaseUrl;
-      var _this$props3 = this.props,
-        onReportingLinesClick = _this$props3.onReportingLinesClick,
-        cloudId = _this$props3.cloudId,
-        userId = _this$props3.userId,
-        addFlag = _this$props3.addFlag;
+      var _this$props4 = this.props,
+        onReportingLinesClick = _this$props4.onReportingLinesClick,
+        cloudId = _this$props4.cloudId,
+        userId = _this$props4.userId,
+        addFlag = _this$props4.addFlag;
       var 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, {
@@ -170,7 +186,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement(ErrorMessage, {
           errorType: error,
           reload: this.clientFetchProfile,
-          fireAnalytics: this.fireAnalytics
+          fireAnalytics: this.fireAnalytics,
+          fireAnalyticsNext: this.fireAnalyticsNext
         }));
       }
       var newProps = _objectSpread(_objectSpread({
@@ -210,4 +227,11 @@ _defineProperty(ProfileCardResourced, "defaultProps", {
   actions: []
 });
 export var ProfileCardResourcedInternal = ProfileCardResourced;
-export default withAnalyticsEvents()(ProfileCardResourced);
+var ProfileCardResourcedWithAnalytics = function ProfileCardResourcedWithAnalytics(props) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  return /*#__PURE__*/React.createElement(ProfileCardResourced, _extends({
+    fireEvent: fireEvent
+  }, props));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', ProfileCardResourcedWithAnalytics, withAnalyticsEvents()(ProfileCardResourced));

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

@@ -1,4 +1,4 @@
-/* ProfileCardTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ProfileCardTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -21,12 +21,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';
@@ -147,6 +149,8 @@ export default function ProfilecardTriggerNext(_ref2) {
     isTriggeredUsingKeyboard = _useState18[0],
     setTriggeredUsingKeyboard = _useState18[1];
   var triggerRef = useRef(null);
+  var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
+    fireEventNext = _useAnalyticsEventsNe.fireEvent;
   useEffect(function () {
     isMounted.current = true;
     return function () {
@@ -165,6 +169,17 @@ export default function ProfilecardTriggerNext(_ref2) {
     setShouldShowGiveKudos(false);
     setTeamCentralBaseUrl(undefined);
   }, [userId]);
+
+  // Create a wrapper function that has the same interface as fireEventNext but includes isMounted check
+  var fireAnalyticsNext = useCallback(function (eventKey) {
+    if (!isMounted.current) {
+      return;
+    }
+    for (var _len = arguments.length, attributes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      attributes[_key - 1] = arguments[_key];
+    }
+    fireEventNext.apply(void 0, [eventKey].concat(attributes));
+  }, [fireEventNext]);
   var fireAnalytics = useCallback(function (payload) {
     // Don't fire any analytics if the component is unmounted
     if (!isMounted.current) {
@@ -228,7 +243,7 @@ export default function ProfilecardTriggerNext(_ref2) {
           setError(null);
           setData(null);
           _context.prev = 6;
-          requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
+          requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics, fireAnalyticsNext), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
             withOrgContext: true,
             withSiteContext: true
           })]);
@@ -248,7 +263,7 @@ export default function ProfilecardTriggerNext(_ref2) {
           return _context.stop();
       }
     }, _callee, null, [[6, 14]]);
-  })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
+  })), [cloudId, fireAnalytics, fireAnalyticsNext, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   var showProfilecard = useCallback(function () {
     clearTimeout(hideTimer.current);
     clearTimeout(showTimer.current);
@@ -267,25 +282,46 @@ export default function ProfilecardTriggerNext(_ref2) {
     event.stopPropagation();
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'click'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'click',
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      } else {
+        fireAnalytics(cardTriggered('user', 'click'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onMouseEnter = useCallback(function () {
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'hover'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'hover',
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      } else {
+        fireAnalytics(cardTriggered('user', 'hover'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onKeyPress = useCallback(function (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', _objectSpread({
+            method: 'click',
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA));
+        } else {
+          fireAnalytics(cardTriggered('user', 'click'));
+        }
       }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onFocus = useCallback(function () {
     showProfilecard();
   }, [showProfilecard]);
@@ -365,7 +401,8 @@ export default function ProfilecardTriggerNext(_ref2) {
       offset: offset !== null && offset !== void 0 ? offset : [0, 8],
       content: function content() {
         return /*#__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),
@@ -440,7 +477,8 @@ export default function ProfilecardTriggerNext(_ref2) {
     offset: offset !== null && offset !== void 0 ? offset : [0, 8],
     content: function content() {
       return /*#__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),
@@ -506,10 +544,12 @@ export default function ProfilecardTriggerNext(_ref2) {
   })));
 }
 var LoadingView = function LoadingView(_ref4) {
-  var fireAnalytics = _ref4.fireAnalytics;
+  var fireAnalytics = _ref4.fireAnalytics,
+    fireAnalyticsNext = _ref4.fireAnalyticsNext;
   return /*#__PURE__*/React.createElement(CardWrapper, {
     testId: "profilecard.profilecardtrigger.loading"
   }, /*#__PURE__*/React.createElement(UserLoadingState, {
-    fireAnalytics: fireAnalytics
+    fireAnalytics: fireAnalytics,
+    fireAnalyticsNext: fireAnalyticsNext
   }));
 };

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

@@ -1,16 +1,21 @@
-/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./ReportingLinesDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
 // 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';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -32,6 +37,7 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = props.fireAnalyticsWithDurationNext,
     _props$reportingLines = props.reportingLines,
     reportingLines = _props$reportingLines === void 0 ? {} : _props$reportingLines,
     reportingLinesProfileUrl = props.reportingLinesProfileUrl,
@@ -44,12 +50,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var hasReports = reports.length > 0;
   var getReportingLinesOnClick = function getReportingLinesOnClick(user, userType) {
     return onReportingLinesClick ? function () {
-      fireAnalyticsWithDuration(function (duration) {
-        return reportingLinesClicked({
-          duration: duration,
-          userType: userType
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            userType: userType,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return reportingLinesClicked({
+            duration: duration,
+            userType: userType
+          });
+        });
+      }
       onReportingLinesClick(user);
     } : undefined;
   };
@@ -58,12 +74,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(function (duration) {
-      return reportingLinesClicked({
-        duration: duration,
-        userType: userType
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          userType: userType,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return reportingLinesClicked({
+          duration: duration,
+          userType: userType
+        });
+      });
+    }
     if (shouldPreventDefault) {
       return;
     }

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

@@ -1,12 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
 var UserLoadingState = function UserLoadingState(_ref) {
-  var fireAnalytics = _ref.fireAnalytics;
+  var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext;
   useEffect(function () {
-    fireAnalytics(profileCardRendered('user', 'spinner'));
-  }, [fireAnalytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.spinner', _objectSpread({
+        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;

package/dist/esm/components/common/LoadingState.js

@@ -1,14 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 { getActionSubject, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export var LoadingState = function LoadingState(_ref) {
   var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext,
     profileType = _ref.profileType;
   useEffect(function () {
-    if (fireAnalytics) {
-      fireAnalytics(profileCardRendered(profileType, 'spinner'));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      if (fireAnalyticsNext) {
+        fireAnalyticsNext("ui.".concat(getActionSubject(profileType), ".rendered.spinner"), _objectSpread({
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      }
+    } else {
+      if (fireAnalytics) {
+        fireAnalytics(profileCardRendered(profileType, 'spinner'));
+      }
     }
-  }, [fireAnalytics, profileType]);
+  }, [fireAnalytics, fireAnalyticsNext, profileType]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };