@atlaskit/profilecard 24.13.6 → 24.14.0

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

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

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

@@ -1,4 +1,4 @@
-/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ProfileCardDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -137,6 +137,7 @@ export const ProfileCardDetails = props => {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,
     onReportingLinesClick: props.onReportingLinesClick,
-    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: props.fireAnalyticsWithDurationNext
   }));
 };

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

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

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

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

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

@@ -1,16 +1,18 @@
-/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReportingLinesDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
-import { reportingLinesClicked } from '../../util/analytics';
+import { PACKAGE_META_DATA, reportingLinesClicked } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -34,6 +36,7 @@ const ReportingLinesDetails = props => {
   } = useIntl();
   const {
     fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext,
     reportingLines = {},
     reportingLinesProfileUrl,
     onReportingLinesClick
@@ -45,10 +48,19 @@ const ReportingLinesDetails = props => {
   const manager = managers.length >= 1 ? managers[0] : undefined;
   const hasReports = reports.length > 0;
   const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     onReportingLinesClick(user);
   } : undefined;
   const onReportingLinksClick = (user, userType, href) => {
@@ -56,10 +68,19 @@ const ReportingLinesDetails = props => {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     if (shouldPreventDefault) {
       return;
     }

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

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

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

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

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
-import { cardTriggered } from '../../util/analytics';
+import { cardTriggered, getActionSubject, PACKAGE_META_DATA } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import { useProfileInfo } from '../../util/useProfileInfo';
 import { LoadingState } from './LoadingState';
 import { PopupTrigger } from './PopupTrigger';
@@ -17,7 +19,9 @@ function ProfileCardTriggerInner({
   fetchProfile,
   disabledAriaAttributes,
   profileCardType,
+  testId,
   fireAnalytics,
+  fireAnalyticsNext,
   ...popupProps
 }, ref) {
   var _popupProps$autoFocus;
@@ -57,12 +61,22 @@ function ProfileCardTriggerInner({
       if (!visible) {
         getProfileData === null || getProfileData === void 0 ? void 0 : getProfileData();
         setVisible(true);
-        if (fireAnalytics) {
-          fireAnalytics(cardTriggered(profileCardType, trigger));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          if (fireAnalyticsNext) {
+            fireAnalyticsNext(`ui.${getActionSubject(profileCardType)}.triggered`, {
+              method: trigger,
+              ...PACKAGE_META_DATA,
+              firedAt: Math.round(getPageTime())
+            });
+          }
+        } else {
+          if (fireAnalytics) {
+            fireAnalytics(cardTriggered(profileCardType, trigger));
+          }
         }
       }
     }, showDelay);
-  }, [showDelay, visible, getProfileData, fireAnalytics, profileCardType, trigger]);
+  }, [showDelay, visible, getProfileData, fireAnalytics, profileCardType, trigger, fireAnalyticsNext]);
   const onMouseEnter = useCallback(() => {
     showProfilecard();
   }, [showProfilecard]);
@@ -85,7 +99,8 @@ function ProfileCardTriggerInner({
         showProfilecard: showProfilecard,
         children: children,
         ariaLabelledBy: ariaLabelledBy,
-        trigger: trigger
+        trigger: trigger,
+        "data-testid": testId
       }));
     },
     content: () =>
@@ -94,9 +109,13 @@ function ProfileCardTriggerInner({
     React.createElement("div", {
       onMouseEnter: onMouseEnter,
       onMouseLeave: hideProfilecard,
-      onFocus: showProfilecard
-    }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
+      onFocus: showProfilecard,
+      "data-testid": "profile-card--trigger-content"
+    }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+      testId: "profilecard.profilecardtrigger.loading"
+    }, /*#__PURE__*/React.createElement(LoadingState, {
       fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireAnalyticsNext,
       profileType: profileCardType
     })) : renderProfileCard({
       profileData,

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

@@ -6,9 +6,11 @@ const styles = xcss({
   width: '360px'
 });
 export const ProfileCardWrapper = ({
-  children
+  children,
+  testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles
+    xcss: styles,
+    testId: testId
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* main.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";