@atlaskit/profilecard 24.13.6 → 24.14.0

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

@@ -5,9 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ProfilecardInternal = void 0;
+exports.default = exports.ProfilecardInternal = exports.LoadingView = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -15,7 +16,9 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _new = require("@atlaskit/button/new");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _Card = require("../../styled/Card");
@@ -27,6 +30,8 @@ var _Error = require("../Error");
 var _OverflowProfileCardButtons = require("./OverflowProfileCardButtons");
 var _ProfileCardDetails = require("./ProfileCardDetails");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
 var useKudos = function useKudos(cloudId, userId, teamCentralBaseUrl, openKudosDrawer) {
   var kudosUrl = (0, _react.useMemo)(function () {
@@ -67,6 +72,8 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     openTime = _useState2[0];
   var createAnalyticsEvent = props.createAnalyticsEvent;
+  var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
+    fireEventNext = _useAnalyticsEvents.fireEvent;
   var fireAnalytics = (0, _react.useCallback)(function (payload) {
     if (createAnalyticsEvent) {
       (0, _analytics.fireEvent)(createAnalyticsEvent, payload);
@@ -77,6 +84,11 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
     var event = generator(elapsed);
     fireAnalytics(event);
   }, [fireAnalytics, openTime]);
+  var fireAnalyticsWithDurationNext = (0, _react.useCallback)(function (eventKey, generator) {
+    var duration = (0, _performance.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,
@@ -97,24 +109,36 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
   var canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
   (0, _react.useEffect)(function () {
     if (canRender) {
-      fireAnalyticsWithDuration(function (duration) {
-        return (0, _analytics.profileCardRendered)('user', 'content', {
-          duration: duration,
-          numActions: realActions.length
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.rendered.content', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: realActions.length,
+            firedAt: Math.round((0, _performance.getPageTime)())
+          }, _analytics.PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return (0, _analytics.profileCardRendered)('user', 'content', {
+            duration: duration,
+            numActions: realActions.length
+          });
+        });
+      }
     }
-  }, [canRender, fireAnalyticsWithDuration, realActions]);
+  }, [canRender, fireAnalyticsWithDuration, fireAnalyticsWithDurationNext, realActions]);
   if (hasError) {
     return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
       reload: props.clientFetchProfile,
       errorType: props.errorType || null,
-      fireAnalytics: fireAnalytics
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireEventNext
     }));
   }
   if (isLoading) {
     return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(LoadingView, {
-      fireAnalyticsWithDuration: fireAnalyticsWithDuration
+      fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+      fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
     }));
   }
   if (!canRender) {
@@ -130,36 +154,53 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
     borderColor: "var(--ds-shadow-overlay, ".concat(_colors.N0, ")")
   })), /*#__PURE__*/_react.default.createElement(_Card.CardContent, null, /*#__PURE__*/_react.default.createElement(_ProfileCardDetails.ProfileCardDetails, (0, _extends2.default)({}, props, {
     status: status,
-    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   })), realActions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), /*#__PURE__*/_react.default.createElement(Actions, (0, _extends2.default)({}, (0, _platformFeatureFlags.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 = (0, _react.useCallback)(function (action, args, event, index) {
-    fireAnalyticsWithDuration(function (duration) {
-      return (0, _analytics.actionClicked)('user', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || 'no-id-specified'
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.action', function (duration) {
+        return _objectSpread({
+          method: 'click',
+          firedAt: Math.round((0, _performance.getPageTime)()),
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return (0, _analytics.actionClicked)('user', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        });
+      });
+    }
     if (action.callback && (0, _click.isBasicClick)(event)) {
       event.preventDefault();
       action.callback.apply(action, [event].concat((0, _toConsumableArray2.default)(args)));
     }
-  }, [fireAnalyticsWithDuration]);
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -193,6 +234,7 @@ var Actions = function Actions(_ref) {
   }), overflowActions && /*#__PURE__*/_react.default.createElement(_OverflowProfileCardButtons.OverflowProfileCardButtons, (0, _extends2.default)({
     actions: overflowActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext,
     onItemClick: function onItemClick(action, args, event, index) {
       return onActionClick(action, args, event, index + _OverflowProfileCardButtons.ACTION_OVERFLOW_THRESHOLD);
     }
@@ -200,17 +242,27 @@ var Actions = function Actions(_ref) {
     fullName: fullName
   })));
 };
-var LoadingView = function LoadingView(_ref2) {
-  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration;
+var LoadingView = exports.LoadingView = function LoadingView(_ref2) {
+  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = _ref2.fireAnalyticsWithDurationNext;
   (0, _react.useEffect)(function () {
-    fireAnalyticsWithDuration(function (duration) {
-      return (0, _analytics.profileCardRendered)('user', 'spinner', {
-        duration: duration
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.rendered.spinner', function (duration) {
+        return _objectSpread({
+          firedAt: Math.round((0, _performance.getPageTime)()),
+          duration: duration
+        }, _analytics.PACKAGE_META_DATA);
+      });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return (0, _analytics.profileCardRendered)('user', 'spinner', {
+          duration: duration
+        });
       });
-    });
-  }, [fireAnalyticsWithDuration]);
+    }
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   return /*#__PURE__*/_react.default.createElement(_UserTrigger.SpinnerContainer, {
     testId: "profilecard-spinner-container"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(ProfilecardInternal);
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('ptc-enable-profile-card-analytics-refactor', ProfilecardInternal, (0, _analyticsNext.withAnalyticsEvents)()(ProfilecardInternal));

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -140,6 +140,7 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,
     onReportingLinesClick: props.onReportingLinesClick,
-    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: props.fireAnalyticsWithDurationNext
   }));
 };

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

@@ -17,6 +17,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _giveKudos = require("@atlaskit/give-kudos");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
 var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
 var _UserTrigger = require("../../styled/UserTrigger");
 var _analytics = require("../../util/analytics");
@@ -57,10 +59,23 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         (0, _analytics.fireEvent)(_this.props.createAnalyticsEvent, payload);
       }
     });
+    (0, _defineProperty2.default)(_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));
+      }
+    });
     (0, _defineProperty2.default)(_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
@@ -71,7 +86,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
         })]);
@@ -110,10 +125,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
@@ -163,15 +178,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.default.createElement(_UserTrigger.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
-          fireAnalytics: this.fireAnalytics
+          fireAnalytics: this.fireAnalytics,
+          fireAnalyticsNext: this.fireAnalyticsNext
         }));
       } else if (hasError) {
         return /*#__PURE__*/_react.default.createElement(_UserTrigger.CardWrapper, {
@@ -179,7 +195,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
           errorType: error,
           reload: this.clientFetchProfile,
-          fireAnalytics: this.fireAnalytics
+          fireAnalytics: this.fireAnalytics,
+          fireAnalyticsNext: this.fireAnalyticsNext
         }));
       }
       var newProps = _objectSpread(_objectSpread({
@@ -219,4 +236,11 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
   actions: []
 });
 var ProfileCardResourcedInternal = exports.ProfileCardResourcedInternal = ProfileCardResourced;
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(ProfileCardResourced);
+var ProfileCardResourcedWithAnalytics = function ProfileCardResourcedWithAnalytics(props) {
+  var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  return /*#__PURE__*/_react.default.createElement(ProfileCardResourced, (0, _extends2.default)({
+    fireEvent: fireEvent
+  }, props));
+};
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('ptc-enable-profile-card-analytics-refactor', ProfileCardResourcedWithAnalytics, (0, _analyticsNext.withAnalyticsEvents)()(ProfileCardResourced));

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -23,12 +23,14 @@ var _giveKudos = require("@atlaskit/give-kudos");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
 var _constants = require("@atlaskit/theme/constants");
 var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
 var _getLabelMessage = _interopRequireDefault(require("../../internal/getLabelMessage"));
 var _UserTrigger = require("../../styled/UserTrigger");
 var _analytics = require("../../util/analytics");
 var _config = require("../../util/config");
+var _performance = require("../../util/performance");
 var _AgentProfileCardResourced = require("../Agent/AgentProfileCardResourced");
 var _lazyProfileCard = require("./lazyProfileCard");
 var _UserLoadingState = _interopRequireDefault(require("./UserLoadingState"));
@@ -156,6 +158,8 @@ function ProfilecardTriggerNext(_ref2) {
     isTriggeredUsingKeyboard = _useState18[0],
     setTriggeredUsingKeyboard = _useState18[1];
   var triggerRef = (0, _react.useRef)(null);
+  var _useAnalyticsEventsNe = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
+    fireEventNext = _useAnalyticsEventsNe.fireEvent;
   (0, _react.useEffect)(function () {
     isMounted.current = true;
     return function () {
@@ -174,6 +178,17 @@ 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 = (0, _react.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 = (0, _react.useCallback)(function (payload) {
     // Don't fire any analytics if the component is unmounted
     if (!isMounted.current) {
@@ -237,7 +252,7 @@ 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
           })]);
@@ -257,7 +272,7 @@ 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 = (0, _react.useCallback)(function () {
     clearTimeout(hideTimer.current);
     clearTimeout(showTimer.current);
@@ -276,25 +291,46 @@ function ProfilecardTriggerNext(_ref2) {
     event.stopPropagation();
     showProfilecard();
     if (!visible) {
-      fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'click',
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA));
+      } else {
+        fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onMouseEnter = (0, _react.useCallback)(function () {
     showProfilecard();
     if (!visible) {
-      fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'hover',
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA));
+      } else {
+        fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onKeyPress = (0, _react.useCallback)(function (event) {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
-        fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
+        if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+          fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+            method: 'click',
+            firedAt: Math.round((0, _performance.getPageTime)())
+          }, _analytics.PACKAGE_META_DATA));
+        } else {
+          fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
+        }
       }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onFocus = (0, _react.useCallback)(function () {
     showProfilecard();
   }, [showProfilecard]);
@@ -374,7 +410,8 @@ function ProfilecardTriggerNext(_ref2) {
       offset: offset !== null && offset !== void 0 ? offset : [0, 8],
       content: function content() {
         return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
-          fireAnalytics: fireAnalytics
+          fireAnalytics: fireAnalytics,
+          fireAnalyticsNext: fireAnalyticsNext
         }) : visible && /*#__PURE__*/_react.default.createElement(ProfileCardContent, {
           profilecardProps: profilecardProps,
           isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -449,7 +486,8 @@ function ProfilecardTriggerNext(_ref2) {
     offset: offset !== null && offset !== void 0 ? offset : [0, 8],
     content: function content() {
       return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
-        fireAnalytics: fireAnalytics
+        fireAnalytics: fireAnalytics,
+        fireAnalyticsNext: fireAnalyticsNext
       }) : visible && /*#__PURE__*/_react.default.createElement(ProfileCardContent, {
         profilecardProps: profilecardProps,
         isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -515,10 +553,12 @@ function ProfilecardTriggerNext(_ref2) {
   })));
 }
 var LoadingView = function LoadingView(_ref4) {
-  var fireAnalytics = _ref4.fireAnalytics;
+  var fireAnalytics = _ref4.fireAnalytics,
+    fireAnalyticsNext = _ref4.fireAnalyticsNext;
   return /*#__PURE__*/_react.default.createElement(_UserTrigger.CardWrapper, {
     testId: "profilecard.profilecardtrigger.loading"
   }, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
-    fireAnalytics: fireAnalytics
+    fireAnalytics: fireAnalytics,
+    fireAnalyticsNext: fireAnalyticsNext
   }));
 };

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

@@ -1,4 +1,4 @@
-/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,16 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./ReportingLinesDetails.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _ReportingLines = require("../../styled/ReportingLines");
 var _analytics = require("../../util/analytics");
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+var _performance = require("../../util/performance");
+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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -39,6 +43,7 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _useIntl = (0, _reactIntlNext.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,
@@ -51,12 +56,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var hasReports = reports.length > 0;
   var getReportingLinesOnClick = function getReportingLinesOnClick(user, userType) {
     return onReportingLinesClick ? function () {
-      fireAnalyticsWithDuration(function (duration) {
-        return (0, _analytics.reportingLinesClicked)({
-          duration: duration,
-          userType: userType
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            userType: userType,
+            firedAt: Math.round((0, _performance.getPageTime)())
+          }, _analytics.PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return (0, _analytics.reportingLinesClicked)({
+            duration: duration,
+            userType: userType
+          });
+        });
+      }
       onReportingLinesClick(user);
     } : undefined;
   };
@@ -65,12 +80,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(function (duration) {
-      return (0, _analytics.reportingLinesClicked)({
-        duration: duration,
-        userType: userType
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          userType: userType,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return (0, _analytics.reportingLinesClicked)({
+          duration: duration,
+          userType: userType
+        });
+      });
+    }
     if (shouldPreventDefault) {
       return;
     }

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

@@ -6,16 +6,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _UserTrigger = require("../../styled/UserTrigger");
 var _analytics = require("../../util/analytics");
+var _performance = require("../../util/performance");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
 var UserLoadingState = function UserLoadingState(_ref) {
-  var fireAnalytics = _ref.fireAnalytics;
+  var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext;
   (0, _react.useEffect)(function () {
-    fireAnalytics((0, _analytics.profileCardRendered)('user', 'spinner'));
-  }, [fireAnalytics]);
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.spinner', _objectSpread({
+        firedAt: Math.round((0, _performance.getPageTime)())
+      }, _analytics.PACKAGE_META_DATA));
+    } else {
+      fireAnalytics((0, _analytics.profileCardRendered)('user', 'spinner'));
+    }
+  }, [fireAnalytics, fireAnalyticsNext]);
   return /*#__PURE__*/_react.default.createElement(_UserTrigger.SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };
 var _default = exports.default = UserLoadingState;

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

@@ -6,18 +6,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LoadingState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _UserTrigger = require("../../styled/UserTrigger");
 var _analytics = require("../../util/analytics");
+var _performance = require("../../util/performance");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
 var LoadingState = exports.LoadingState = function LoadingState(_ref) {
   var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext,
     profileType = _ref.profileType;
   (0, _react.useEffect)(function () {
-    if (fireAnalytics) {
-      fireAnalytics((0, _analytics.profileCardRendered)(profileType, 'spinner'));
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      if (fireAnalyticsNext) {
+        fireAnalyticsNext("ui.".concat((0, _analytics.getActionSubject)(profileType), ".rendered.spinner"), _objectSpread({
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA));
+      }
+    } else {
+      if (fireAnalytics) {
+        fireAnalytics((0, _analytics.profileCardRendered)(profileType, 'spinner'));
+      }
     }
-  }, [fireAnalytics, profileType]);
+  }, [fireAnalytics, fireAnalyticsNext, profileType]);
   return /*#__PURE__*/_react.default.createElement(_UserTrigger.SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };