@atlaskit/profilecard 24.14.0 → 24.15.0

package/dist/esm/components/Team/TeamProfileCard.js

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+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, { useCallback, useEffect, useRef, useState } from 'react';
@@ -22,24 +22,37 @@ import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../..
 import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
 import { ActionButtons, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
-import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
+import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, PACKAGE_META_DATA, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
+import { getPageTime } from '../../util/performance';
 import { ErrorIllustration } from '../Error';
 import TeamForbiddenErrorState from './TeamForbiddenErrorState';
 import TeamLoadingState from './TeamLoadingState';
 var LARGE_MEMBER_COUNT = 50;
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
 var avatarGroupMaxCount = 9;
-function onMemberClick(callback, userId, analytics, index, hasHref) {
+function onMemberClick(callback, userId, analytics, analyticsNext, index, hasHref) {
   return function (event) {
-    analytics(function (duration) {
-      return teamAvatarClicked({
-        duration: duration,
-        hasHref: hasHref,
-        hasOnClick: !!callback,
-        index: index
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.avatar', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasHref: hasHref,
+          hasOnClick: !!callback,
+          index: index,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return teamAvatarClicked({
+          duration: duration,
+          hasHref: hasHref,
+          hasOnClick: !!callback,
+          index: index
+        });
+      });
+    }
     if (callback) {
       callback(userId, event);
     }
@@ -51,6 +64,7 @@ var TeamMembers = function TeamMembers(_ref) {
     members = _ref.members,
     onUserClick = _ref.onUserClick,
     includingYou = _ref.includingYou,
+    analyticsNext = _ref.analyticsNext,
     isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -71,15 +85,25 @@ var TeamMembers = function TeamMembers(_ref) {
   var onMoreClick = useCallback(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
-      analytics(function (duration) {
-        return moreMembersClicked({
-          duration: duration,
-          memberCount: count
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreMembers', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            memberCount: count,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return moreMembersClicked({
+            duration: duration,
+            memberCount: count
+          });
+        });
+      }
     }
     isMoreMembersOpen.current = !isOpen;
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   var showMoreButtonProps = {
     onClick: onMoreClick,
     'aria-label': formatMessage(messages.profileCardMoreMembersLabel, {
@@ -94,7 +118,7 @@ var TeamMembers = function TeamMembers(_ref) {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
-      var onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      var onClick = onMemberClick(onUserClick, member.id, analytics, analyticsNext, index, !!generateUserLink);
       return {
         key: member.id,
         name: member.fullName,
@@ -119,17 +143,30 @@ var TeamMembers = function TeamMembers(_ref) {
     }
   })));
 };
-function onActionClick(action, analytics, index) {
+function onActionClick(action, analytics, analyticsNext, index) {
   return function (event) {
-    analytics(function (duration) {
-      return actionClicked('team', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || ''
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.action', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || '',
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return actionClicked('team', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || ''
+        });
+      });
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -142,11 +179,12 @@ function onActionClick(action, analytics, index) {
 var ActionButton = function ActionButton(_ref2) {
   var action = _ref2.action,
     analytics = _ref2.analytics,
+    analyticsNext = _ref2.analyticsNext,
     index = _ref2.index;
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   var actionButton = /*#__PURE__*/React.createElement(LinkButton, {
     key: action.id || index,
-    onClick: onActionClick(action, analytics, index),
+    onClick: onActionClick(action, analytics, analyticsNext, index),
     href: action.link || '',
     target: action.target,
     shouldFitContainer: true
@@ -158,7 +196,8 @@ var ActionButton = function ActionButton(_ref2) {
 };
 var ExtraActions = function ExtraActions(_ref3) {
   var actions = _ref3.actions,
-    analytics = _ref3.analytics;
+    analytics = _ref3.analytics,
+    analyticsNext = _ref3.analyticsNext;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -167,15 +206,25 @@ var ExtraActions = function ExtraActions(_ref3) {
   var onMoreClick = useCallback(function (shouldBeOpen) {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(function (duration) {
-        return moreActionsClicked('team', {
-          duration: duration,
-          numActions: count + 2
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreActions', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: count + 2,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return moreActionsClicked('team', {
+            duration: duration,
+            numActions: count + 2
+          });
+        });
+      }
     }
     setOpen(shouldBeOpen);
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   if (!count) {
     return null;
   }
@@ -188,7 +237,7 @@ var ExtraActions = function ExtraActions(_ref3) {
     content: function content() {
       return /*#__PURE__*/React.createElement(MenuGroup, null, actions.map(function (action, index) {
         return /*#__PURE__*/React.createElement(LinkItem, {
-          onClick: onActionClick(action, analytics, index + 2),
+          onClick: onActionClick(action, analytics, analyticsNext, index + 2),
           key: action.id || index,
           href: action.link
         }, action.label);
@@ -212,7 +261,8 @@ var ExtraActions = function ExtraActions(_ref3) {
 };
 var ButtonSection = function ButtonSection(_ref4) {
   var actions = _ref4.actions,
-    analytics = _ref4.analytics;
+    analytics = _ref4.analytics,
+    analyticsNext = _ref4.analyticsNext;
   if (!actions) {
     return null;
   }
@@ -222,17 +272,20 @@ var ButtonSection = function ButtonSection(_ref4) {
     return /*#__PURE__*/React.createElement(ActionButton, {
       action: action,
       analytics: analytics,
+      analyticsNext: analyticsNext,
       index: index,
       key: index
     });
   }), extraActions && /*#__PURE__*/React.createElement(ExtraActions, {
     actions: extraActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   }));
 };
 var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
   var actions = _ref5.actions,
     analytics = _ref5.analytics,
+    analyticsNext = _ref5.analyticsNext,
     team = _ref5.team,
     viewingUserId = _ref5.viewingUserId,
     generateUserLink = _ref5.generateUserLink,
@@ -250,17 +303,33 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     return member.id === viewingUserId;
   });
   useEffect(function () {
-    analytics(function (duration) {
-      var _team$members;
-      return profileCardRendered('team', 'content', {
-        duration: duration,
-        numActions: allActions.length,
-        memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
-        includingYou: includingYou,
-        descriptionLength: team.description.length,
-        titleLength: team.displayName.length
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.content', function (duration) {
+        var _team$members$length, _team$members;
+        return _objectSpread({
+          duration: duration,
+          numActions: allActions.length,
+          memberCount: (_team$members$length = (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length) !== null && _team$members$length !== void 0 ? _team$members$length : null,
+          includingYou: includingYou !== null && includingYou !== void 0 ? includingYou : null,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        var _team$members2;
+        return profileCardRendered('team', 'content', {
+          duration: duration,
+          numActions: allActions.length,
+          memberCount: (_team$members2 = team.members) === null || _team$members2 === void 0 ? void 0 : _team$members2.length,
+          includingYou: includingYou,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length
+        });
+      });
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
@@ -272,6 +341,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
     analytics: analytics,
+    analyticsNext: analyticsNext,
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
@@ -279,32 +349,53 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/React.createElement(DescriptionWrapper, null, /*#__PURE__*/React.createElement(Description, null, team.description)), /*#__PURE__*/React.createElement(ButtonSection, {
     actions: allActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   })));
 };
 var ErrorMessage = function ErrorMessage(_ref6) {
   var analytics = _ref6.analytics,
+    analyticsNext = _ref6.analyticsNext,
     clientFetchProfile = _ref6.clientFetchProfile,
     isLoading = _ref6.isLoading;
   var hasRetry = !!clientFetchProfile;
   useEffect(function () {
-    analytics(function (duration) {
-      return profileCardRendered('team', 'error', {
-        duration: duration,
-        hasRetry: hasRetry
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasRetry: hasRetry,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
-  }, [analytics, hasRetry]);
+    } else {
+      analytics(function (duration) {
+        return profileCardRendered('team', 'error', {
+          duration: duration,
+          hasRetry: hasRetry
+        });
+      });
+    }
+  }, [analytics, analyticsNext, hasRetry]);
   var retry = useCallback(function () {
-    analytics(function (duration) {
-      return errorRetryClicked({
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.errorRetry', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return errorRetryClicked({
+          duration: duration
+        });
+      });
+    }
     if (clientFetchProfile) {
       clientFetchProfile();
     }
-  }, [analytics, clientFetchProfile]);
+  }, [analytics, analyticsNext, clientFetchProfile]);
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "team-profilecard-error"
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
@@ -319,6 +410,7 @@ var ErrorMessage = function ErrorMessage(_ref6) {
 };
 var TeamProfileCard = function TeamProfileCard(props) {
   var analytics = props.analytics,
+    analyticsNext = props.analyticsNext,
     clientFetchProfile = props.clientFetchProfile,
     hasError = props.hasError,
     isLoading = props.isLoading,
@@ -327,13 +419,15 @@ var TeamProfileCard = function TeamProfileCard(props) {
   if (hasError) {
     if ((errorType === null || errorType === void 0 ? void 0 : errorType.reason) === 'TEAMS_FORBIDDEN') {
       return /*#__PURE__*/React.createElement(TeamForbiddenErrorState, {
-        analytics: analytics
+        analytics: analytics,
+        analyticsNext: analyticsNext
       });
     } else {
       return /*#__PURE__*/React.createElement(CardWrapper, {
         testId: "team-profilecard"
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         analytics: analytics,
+        analyticsNext: analyticsNext,
         clientFetchProfile: clientFetchProfile,
         isLoading: isLoading
       }));
@@ -341,7 +435,8 @@ var TeamProfileCard = function TeamProfileCard(props) {
   }
   if (isLoading) {
     return /*#__PURE__*/React.createElement(TeamLoadingState, {
-      analytics: analytics
+      analytics: analytics,
+      analyticsNext: analyticsNext
     });
   }
   if (team) {

package/dist/esm/components/Team/TeamProfileCardTrigger.js

@@ -6,6 +6,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Suspense } from 'react';
@@ -13,13 +15,14 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Popup from '@atlaskit/popup';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
 import _filterActions from '../../internal/filterActions';
 import messages from '../../messages';
-import { cardTriggered, fireEvent, profileCardRendered } from '../../util/analytics';
+import { cardTriggered, fireEvent, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
 import { getPageTime } from '../../util/performance';
@@ -48,10 +51,28 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         fireEvent(_this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(_this, "fireAnalyticsNext", function (eventKey) {
+      // Don't fire any 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, "fireAnalyticsWithDuration", function (generator) {
       var event = generator(getPageTime() - _this.openTime);
       _this.fireAnalytics(event);
     });
+    _defineProperty(_this, "fireAnalyticsWithDurationNext", function (eventKey, generator) {
+      var duration = getPageTime() - _this.openTime;
+      var attributes = generator(duration);
+      _this.fireAnalyticsNext(eventKey, attributes);
+    });
     _defineProperty(_this, "hideProfilecard", function () {
       var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       clearTimeout(_this.showTimer);
@@ -93,7 +114,16 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         _this.openedByHover = false;
         _this.showProfilecard(0);
         if (!_this.state.visible) {
-          _this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            _this.fireAnalyticsNext('ui.teamProfileCard.triggered', _objectSpread(_objectSpread({
+              method: 'click'
+            }, PACKAGE_META_DATA), {}, {
+              firedAt: Math.round(getPageTime()),
+              teamId: _this.props.teamId
+            }));
+          } else {
+            _this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
+          }
         }
       }
     });
@@ -103,7 +133,16 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }
       if (!_this.state.visible) {
         _this.openedByHover = true;
-        _this.fireAnalytics(cardTriggered('team', 'hover', _this.props.teamId));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          _this.fireAnalyticsNext('ui.teamProfileCard.triggered', _objectSpread(_objectSpread({
+            method: 'hover'
+          }, PACKAGE_META_DATA), {}, {
+            firedAt: Math.round(getPageTime()),
+            teamId: _this.props.teamId
+          }));
+        } else {
+          _this.fireAnalytics(cardTriggered('team', 'hover', _this.props.teamId));
+        }
       }
       _this.showProfilecard(DELAY_MS_SHOW);
     });
@@ -123,7 +162,15 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         });
         _this.showProfilecard(0);
         if (!_this.state.visible) {
-          _this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            _this.fireAnalyticsNext('ui.teamProfileCard.triggered', _objectSpread({
+              method: 'click',
+              firedAt: Math.round(getPageTime()),
+              teamId: _this.props.teamId
+            }, PACKAGE_META_DATA));
+          } else {
+            _this.fireAnalytics(cardTriggered('team', 'click', _this.props.teamId));
+          }
         }
       }
     });
@@ -176,9 +223,9 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       isTriggeredByKeyboard: false
     });
     _defineProperty(_this, "clientFetchProfile", function () {
-      var _this$props = _this.props,
-        orgId = _this$props.orgId,
-        teamId = _this$props.teamId;
+      var _this$props2 = _this.props,
+        orgId = _this$props2.orgId,
+        teamId = _this$props2.teamId;
       var isLoading = _this.state.isLoading;
       if (isLoading === true) {
         // don't fetch data when fetching is in process
@@ -191,13 +238,20 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         var fireEvent = function fireEvent(event) {
           _this.fireAnalytics(event);
         };
-        var requests = Promise.all([_this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
+        var fireAnalyticsNext = function fireAnalyticsNext(eventKey) {
+          var _this2;
+          for (var _len3 = arguments.length, attributes = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+            attributes[_key3 - 1] = arguments[_key3];
+          }
+          (_this2 = _this).fireAnalyticsNext.apply(_this2, [eventKey].concat(attributes));
+        };
+        var requests = Promise.all([_this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent, fireAnalyticsNext), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
           withOrgContext: true,
           withSiteContext: true
         })]);
         requests.then(function (res) {
-          var _this2;
-          return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
+          var _this3;
+          return (_this3 = _this).handleClientSuccess.apply(_this3, _toConsumableArray(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -206,20 +260,27 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       });
     });
     _defineProperty(_this, "onErrorBoundary", function () {
-      _this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
-        duration: 0
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        _this.fireAnalyticsNext('ui.teamProfileCard.rendered.errorBoundary', _objectSpread(_objectSpread({}, PACKAGE_META_DATA), {}, {
+          firedAt: Math.round(getPageTime()),
+          duration: 0
+        }));
+      } else {
+        _this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
+          duration: 0
+        }));
+      }
       _this.setState({
         renderError: true
       });
     });
     _defineProperty(_this, "renderProfileCard", function () {
-      var _this$props2 = _this.props,
-        generateUserLink = _this$props2.generateUserLink,
-        onUserClick = _this$props2.onUserClick,
-        viewingUserId = _this$props2.viewingUserId,
-        viewProfileLink = _this$props2.viewProfileLink,
-        viewProfileOnClick = _this$props2.viewProfileOnClick;
+      var _this$props3 = _this.props,
+        generateUserLink = _this$props3.generateUserLink,
+        onUserClick = _this$props3.onUserClick,
+        viewingUserId = _this$props3.viewingUserId,
+        viewProfileLink = _this$props3.viewProfileLink,
+        viewProfileOnClick = _this$props3.viewProfileOnClick;
       var _this$state = _this.state,
         data = _this$state.data,
         error = _this$state.error,
@@ -229,6 +290,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         clientFetchProfile: _this.clientFetchProfile,
         actions: _this.filterActions(),
         analytics: _this.fireAnalyticsWithDuration,
+        analyticsNext: _this.fireAnalyticsWithDurationNext,
         team: data || undefined,
         generateUserLink: generateUserLink,
         onUserClick: onUserClick,
@@ -238,7 +300,8 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       };
       return /*#__PURE__*/React.createElement("div", _this.cardListeners, _this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
         fallback: /*#__PURE__*/React.createElement(TeamLoadingState, {
-          analytics: _this.fireAnalyticsWithDuration
+          analytics: _this.fireAnalyticsWithDuration,
+          analyticsNext: _this.fireAnalyticsWithDurationNext
         })
       }, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
         isLoading: isLoading,
@@ -264,11 +327,11 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }));
     });
     _defineProperty(_this, "renderTrigger", function (triggerProps) {
-      var _this$props3 = _this.props,
-        children = _this$props3.children,
-        intl = _this$props3.intl,
-        triggerLinkType = _this$props3.triggerLinkType,
-        viewProfileLink = _this$props3.viewProfileLink;
+      var _this$props4 = _this.props,
+        children = _this$props4.children,
+        intl = _this$props4.intl,
+        triggerLinkType = _this$props4.triggerLinkType,
+        viewProfileLink = _this$props4.viewProfileLink;
       if (triggerLinkType === 'none') {
         return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement(Box, _extends({
           as: "span",
@@ -303,10 +366,10 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props4 = this.props,
-        orgId = _this$props4.orgId,
-        teamId = _this$props4.teamId,
-        resourceClient = _this$props4.resourceClient;
+      var _this$props5 = this.props,
+        orgId = _this$props5.orgId,
+        teamId = _this$props5.teamId,
+        resourceClient = _this$props5.resourceClient;
       var visible = this.state.visible;
 
       // just re-fetching data when the card opens
@@ -352,14 +415,14 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
   }, {
     key: "filterActions",
     value: function filterActions() {
-      var _this3 = this;
+      var _this4 = this;
       var actions = _filterActions(this.props.actions, this.state.data);
       if (this.state.shouldShowGiveKudos) {
         var kudosAction = {
           label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
           id: 'give-kudos',
           callback: function callback() {
-            _this3.openKudosDrawer();
+            _this4.openKudosDrawer();
           },
           link: this.kudosUrl()
         };
@@ -370,7 +433,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
   }, {
     key: "renderPopup",
     value: function renderPopup() {
-      var _this4 = this;
+      var _this5 = this;
       if (this.state.renderError) {
         return this.props.children;
       }
@@ -382,7 +445,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         placement: this.props.position,
         content: this.renderProfileCard,
         trigger: function trigger(triggerProps) {
-          return _this4.renderTrigger(triggerProps);
+          return _this5.renderTrigger(triggerProps);
         },
         zIndex: layers.modal(),
         shouldFlip: true,
@@ -408,4 +471,11 @@ _defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));
+var TeamProfileCardTriggerWithAnalytics = function TeamProfileCardTriggerWithAnalytics(props) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  return /*#__PURE__*/React.createElement(TeamProfileCardTriggerInternal, _extends({}, props, {
+    fireEvent: fireEvent
+  }));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', injectIntl(TeamProfileCardTriggerWithAnalytics), withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal)));