@atlaskit/profilecard 24.14.1 → 24.16.0

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

@@ -17,22 +17,34 @@ 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';
 const LARGE_MEMBER_COUNT = 50;
 const GIVE_KUDOS_ACTION_ID = 'give-kudos';
 const avatarGroupMaxCount = 9;
-function onMemberClick(callback, userId, analytics, index, hasHref) {
+function onMemberClick(callback, userId, analytics, analyticsNext, index, hasHref) {
   return event => {
-    analytics(duration => teamAvatarClicked({
-      duration,
-      hasHref,
-      hasOnClick: !!callback,
-      index
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.avatar', duration => ({
+        duration,
+        hasHref,
+        hasOnClick: !!callback,
+        index,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => teamAvatarClicked({
+        duration,
+        hasHref,
+        hasOnClick: !!callback,
+        index
+      }));
+    }
     if (callback) {
       callback(userId, event);
     }
@@ -44,6 +56,7 @@ const TeamMembers = ({
   members,
   onUserClick,
   includingYou,
+  analyticsNext,
   isTriggeredByKeyboard
 }) => {
   const {
@@ -68,13 +81,22 @@ const TeamMembers = ({
       current: isOpen
     } = isMoreMembersOpen;
     if (!isOpen) {
-      analytics(duration => moreMembersClicked({
-        duration,
-        memberCount: count
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreMembers', duration => ({
+          duration,
+          memberCount: count,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        }));
+      } else {
+        analytics(duration => moreMembersClicked({
+          duration,
+          memberCount: count
+        }));
+      }
     }
     isMoreMembersOpen.current = !isOpen;
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   const showMoreButtonProps = {
     onClick: onMoreClick,
     'aria-label': formatMessage(messages.profileCardMoreMembersLabel, {
@@ -89,7 +111,7 @@ const TeamMembers = ({
     appearance: "stack",
     data: members.map((member, index) => {
       const href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
-      const onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      const onClick = onMemberClick(onUserClick, member.id, analytics, analyticsNext, index, !!generateUserLink);
       return {
         key: member.id,
         name: member.fullName,
@@ -112,15 +134,27 @@ const TeamMembers = ({
     }
   })));
 };
-function onActionClick(action, analytics, index) {
+function onActionClick(action, analytics, analyticsNext, index) {
   return (event, ...args) => {
-    analytics(duration => actionClicked('team', {
-      duration,
-      hasHref: !!action.link,
-      hasOnClick: !!action.callback,
-      index,
-      actionId: action.id || ''
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.action', duration => ({
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || '',
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => actionClicked('team', {
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || ''
+      }));
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       action.callback(event, ...args);
@@ -130,12 +164,13 @@ function onActionClick(action, analytics, index) {
 const ActionButton = ({
   action,
   analytics,
+  analyticsNext,
   index
 }) => {
   const isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   const 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
@@ -147,20 +182,30 @@ const ActionButton = ({
 };
 const ExtraActions = ({
   actions,
-  analytics
+  analytics,
+  analyticsNext
 }) => {
   const [isOpen, setOpen] = useState(false);
   const count = actions.length;
   const onMoreClick = useCallback(shouldBeOpen => {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(duration => moreActionsClicked('team', {
-        duration,
-        numActions: count + 2
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreActions', duration => ({
+          duration,
+          numActions: count + 2,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        }));
+      } else {
+        analytics(duration => moreActionsClicked('team', {
+          duration,
+          numActions: count + 2
+        }));
+      }
     }
     setOpen(shouldBeOpen);
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   if (!count) {
     return null;
   }
@@ -169,7 +214,7 @@ const ExtraActions = ({
     onClose: () => setOpen(false),
     placement: "bottom-start",
     content: () => /*#__PURE__*/React.createElement(MenuGroup, null, actions.map((action, index) => /*#__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))),
@@ -189,7 +234,8 @@ const ExtraActions = ({
 };
 const ButtonSection = ({
   actions,
-  analytics
+  analytics,
+  analyticsNext
 }) => {
   if (!actions) {
     return null;
@@ -199,16 +245,19 @@ const ButtonSection = ({
   return /*#__PURE__*/React.createElement(ActionButtons, null, initialActions.map((action, index) => /*#__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
   }));
 };
 const TeamProfilecardContent = ({
   actions,
   analytics,
+  analyticsNext,
   team,
   viewingUserId,
   generateUserLink,
@@ -225,17 +274,34 @@ const TeamProfilecardContent = ({
   }, ...(actions || [])];
   const includingYou = team.members && team.members.some(member => member.id === viewingUserId);
   useEffect(() => {
-    analytics(duration => {
-      var _team$members;
-      return profileCardRendered('team', 'content', {
-        duration,
-        numActions: allActions.length,
-        memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
-        includingYou,
-        descriptionLength: team.description.length,
-        titleLength: team.displayName.length
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.content', duration => {
+        var _team$members$length, _team$members;
+        return {
+          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(duration => {
+        var _team$members2;
+        return profileCardRendered('team', 'content', {
+          duration,
+          numActions: allActions.length,
+          memberCount: (_team$members2 = team.members) === null || _team$members2 === void 0 ? void 0 : _team$members2.length,
+          includingYou,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length
+        });
+      });
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
@@ -247,6 +313,7 @@ const TeamProfilecardContent = ({
     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,
@@ -254,29 +321,48 @@ const TeamProfilecardContent = ({
     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
   })));
 };
 const ErrorMessage = ({
   analytics,
+  analyticsNext,
   clientFetchProfile,
   isLoading
 }) => {
   const hasRetry = !!clientFetchProfile;
   useEffect(() => {
-    analytics(duration => profileCardRendered('team', 'error', {
-      duration,
-      hasRetry
-    }));
-  }, [analytics, hasRetry]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', duration => ({
+        duration,
+        hasRetry,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => profileCardRendered('team', 'error', {
+        duration,
+        hasRetry
+      }));
+    }
+  }, [analytics, analyticsNext, hasRetry]);
   const retry = useCallback(() => {
-    analytics(duration => errorRetryClicked({
-      duration
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.errorRetry', duration => ({
+        duration,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => errorRetryClicked({
+        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, {
@@ -292,6 +378,7 @@ const ErrorMessage = ({
 const TeamProfileCard = props => {
   const {
     analytics,
+    analyticsNext,
     clientFetchProfile,
     hasError,
     isLoading,
@@ -301,13 +388,15 @@ const 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
       }));
@@ -315,7 +404,8 @@ const TeamProfileCard = props => {
   }
   if (isLoading) {
     return /*#__PURE__*/React.createElement(TeamLoadingState, {
-      analytics: analytics
+      analytics: analytics,
+      analyticsNext: analyticsNext
     });
   }
   if (team) {

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

@@ -5,12 +5,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';
 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';
@@ -34,10 +36,24 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         fireEvent(this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(this, "fireAnalyticsNext", (eventKey, ...attributes) => {
+      // Don't fire any analytics if the component is unmounted
+      if (!this._isMounted) {
+        return;
+      }
+      if (this.props.fireEvent) {
+        this.props.fireEvent(eventKey, ...attributes);
+      }
+    });
     _defineProperty(this, "fireAnalyticsWithDuration", generator => {
       const event = generator(getPageTime() - this.openTime);
       this.fireAnalytics(event);
     });
+    _defineProperty(this, "fireAnalyticsWithDurationNext", (eventKey, generator) => {
+      const duration = getPageTime() - this.openTime;
+      const attributes = generator(duration);
+      this.fireAnalyticsNext(eventKey, attributes);
+    });
     _defineProperty(this, "hideProfilecard", (delay = 0) => {
       clearTimeout(this.showTimer);
       clearTimeout(this.hideTimer);
@@ -77,7 +93,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         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', {
+              method: 'click',
+              ...PACKAGE_META_DATA,
+              firedAt: Math.round(getPageTime()),
+              teamId: this.props.teamId
+            });
+          } else {
+            this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          }
         }
       }
     });
@@ -87,7 +112,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       }
       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', {
+            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);
     });
@@ -107,7 +141,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         });
         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', {
+              method: 'click',
+              firedAt: Math.round(getPageTime()),
+              teamId: this.props.teamId,
+              ...PACKAGE_META_DATA
+            });
+          } else {
+            this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          }
         }
       }
     });
@@ -178,7 +221,10 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         const fireEvent = event => {
           this.fireAnalytics(event);
         };
-        const requests = Promise.all([this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
+        const fireAnalyticsNext = (eventKey, ...attributes) => {
+          this.fireAnalyticsNext(eventKey, ...attributes);
+        };
+        const requests = Promise.all([this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent, fireAnalyticsNext), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
           withOrgContext: true,
           withSiteContext: true
         })]);
@@ -186,9 +232,17 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       });
     });
     _defineProperty(this, "onErrorBoundary", () => {
-      this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
-        duration: 0
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        this.fireAnalyticsNext('ui.teamProfileCard.rendered.errorBoundary', {
+          ...PACKAGE_META_DATA,
+          firedAt: Math.round(getPageTime()),
+          duration: 0
+        });
+      } else {
+        this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
+          duration: 0
+        }));
+      }
       this.setState({
         renderError: true
       });
@@ -211,6 +265,7 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         clientFetchProfile: this.clientFetchProfile,
         actions: this.filterActions(),
         analytics: this.fireAnalyticsWithDuration,
+        analyticsNext: this.fireAnalyticsWithDurationNext,
         team: data || undefined,
         generateUserLink,
         onUserClick,
@@ -220,7 +275,8 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       };
       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,
@@ -371,4 +427,12 @@ _defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));
+const TeamProfileCardTriggerWithAnalytics = props => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(TeamProfileCardTriggerInternal, _extends({}, props, {
+    fireEvent: fireEvent
+  }));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', injectIntl(TeamProfileCardTriggerWithAnalytics), withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal)));

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

@@ -107,7 +107,9 @@ function ProfileCardTriggerInner({
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      onMouseEnter: onMouseEnter,
+      onMouseEnter: onMouseEnter
+      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+      ,
       onMouseLeave: hideProfilecard,
       onFocus: showProfilecard,
       "data-testid": "profile-card--trigger-content"

package/dist/es2019/components/team-profile-card/main.js

@@ -9,7 +9,9 @@ import AvatarGroup from '@atlaskit/avatar-group';
 import Heading from '@atlaskit/heading';
 import LinkItem from '@atlaskit/menu/link-item';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { fireEvent } from '../../util/analytics';
@@ -72,24 +74,31 @@ export const TeamProfileCard = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
   const hasOtherTeamConnections = useMemo(() => teamContainers.filter(tc => tc.id === containerId).length < teamContainers.length, [containerId, teamContainers]);
 
   // TODO: set isNewLayout to be true when clean up 'team-bi-directional-container-connection' experiment
   const isNewLayout = Boolean(props.isKudosEnabled || props.otherActions);
   const onClick = useCallback(() => {
-    if (createAnalyticsEvent) {
-      fireEvent(createAnalyticsEvent, {
-        action: 'clicked',
-        actionSubject: 'button',
-        actionSubjectId: 'viewTeamProfileButton',
-        attributes: {}
-      });
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.viewTeamProfileButton', {});
+    } else {
+      if (createAnalyticsEvent) {
+        fireEvent(createAnalyticsEvent, {
+          action: 'clicked',
+          actionSubject: 'button',
+          actionSubjectId: 'viewTeamProfileButton',
+          attributes: {}
+        });
+      }
     }
     if (!isNewLayout) {
       window.open(teamProfileUrl, '_blank');
     }
-  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout]);
+  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout, fireEventNext]);
   if (isNewLayout) {
     return /*#__PURE__*/React.createElement(Box, {
       xcss: styles.wrapperStyles,
@@ -174,7 +183,8 @@ export const TeamProfileCard = ({
         testId: "team-app-tile",
         alt: "team-app-tile",
         xcss: styles.teamAppTileStyles
-      })
+      }),
+      testId: "team-profile-card-profile-link-item"
     }, /*#__PURE__*/React.createElement(Text, {
       maxLines: 1,
       color: "color.text"

package/dist/es2019/components/team-profile-card/team-connections/main.js

@@ -4,7 +4,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { LinkItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { ContainerIcon, getContainerProperties } from '@atlaskit/teams-public';
 import { fireEvent } from '../../../util/analytics';
 const styles = {
@@ -30,16 +32,25 @@ export const TeamConnections = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const onClick = useCallback(() => {
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'teamConnectionItem',
-      actionSubjectId: 'teamProfileCard',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
         container: containerType
-      }
-    });
-  }, [containerType, createAnalyticsEvent]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'teamConnectionItem',
+        actionSubjectId: 'teamProfileCard',
+        attributes: {
+          container: containerType
+        }
+      });
+    }
+  }, [containerType, createAnalyticsEvent, fireEventNext]);
   return /*#__PURE__*/React.createElement(LinkItem, {
     href: link,
     onClick: onClick,
@@ -87,16 +98,25 @@ export const NewTeamConnections = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const onClick = useCallback(() => {
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'teamConnectionItem',
-      actionSubjectId: 'teamProfileCard',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
         container: containerType
-      }
-    });
-  }, [containerType, createAnalyticsEvent]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'teamConnectionItem',
+        actionSubjectId: 'teamProfileCard',
+        attributes: {
+          container: containerType
+        }
+      });
+    }
+  }, [containerType, createAnalyticsEvent, fireEventNext]);
   return /*#__PURE__*/React.createElement(LinkItem, {
     href: link,
     onClick: onClick,
@@ -120,7 +140,8 @@ export const NewTeamConnections = ({
       backgroundColor: 'color.background.neutral.subtle',
       xcss: styles.containerTypeIconButtonStyles,
       testId: "container-type-icon"
-    }, icon)
+    }, icon),
+    testId: "team-connection-item"
   }, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     color: "color.text"