@atlaskit/profilecard 24.14.1 → 24.16.0

package/dist/es2019/components/Agent/ActionsCompiled.js

@@ -8,6 +8,7 @@ import Button from '@atlaskit/button/new';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { AgentDropdownMenu, ChatPillIcon } from '@atlaskit/rovo-agent-components';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { fireEvent } from '../../util/analytics';
 import { AgentDeleteConfirmationModal } from './AgentDeleteConfirmationModal';
 const styles = {
@@ -34,6 +35,9 @@ export const AgentActions = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const isForgeAgent = agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY';
   const loadAgentPermissions = useCallback(async () => {
@@ -53,17 +57,24 @@ export const AgentActions = ({
     };
   }, [agent.id, resourceClient]);
   const handleDeleteAgent = useCallback(() => {
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'button',
-      actionSubjectId: 'deleteAgentButton',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.deleteAgentButton', {
         agentId: agent.id,
         source: 'agentProfileCard'
-      }
-    });
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'deleteAgentButton',
+        attributes: {
+          agentId: agent.id,
+          source: 'agentProfileCard'
+        }
+      });
+    }
     setIsDeleteModalOpen(true);
-  }, [agent.id, createAnalyticsEvent]);
+  }, [agent.id, createAnalyticsEvent, fireEventNext]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Inline, {
     space: "space.100",
     xcss: styles.actionsWrapperStyles

package/dist/es2019/components/Agent/AgentDeleteConfirmationModal.js

@@ -21,7 +21,9 @@ export const AgentDeleteConfirmationModal = ({
   }, [agentId, onClose, onSubmit]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
     width: "small"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, formatMessage(messages.title, {
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, formatMessage(messages.title, {
     agentName
   }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, {
     as: "p"

package/dist/es2019/components/Agent/AgentProfileCard.js

@@ -1,11 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { AgentAvatar, AgentBanner, AgentProfileCreator, AgentProfileInfo, AgentStarCount } from '@atlaskit/rovo-agent-components';
-import { fireEvent, profileCardRendered } from '../../util/analytics';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
+import { fireEvent, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import { LoadingState } from '../common/LoadingState';
 import { ErrorMessage } from '../Error';
 import { AgentActions } from './Actions';
@@ -57,6 +60,9 @@ const AgentProfileCard = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const userDefinedConversationStarters = agent === null || agent === void 0 ? void 0 : (_agent$user_defined_c = agent.user_defined_conversation_starters) === null || _agent$user_defined_c === void 0 ? void 0 : _agent$user_defined_c.map(starter => {
     return {
       message: starter,
@@ -78,7 +84,7 @@ const AgentProfileCard = ({
   const handleSetFavourite = useCallback(async () => {
     if (agent !== null && agent !== void 0 && agent.id) {
       try {
-        await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics);
+        await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics, fireEventNext);
         if (isStarred) {
           setStarCount(starCount ? starCount - 1 : 0);
         } else {
@@ -87,7 +93,7 @@ const AgentProfileCard = ({
         setIsStarred(!isStarred);
       } catch (error) {}
     }
-  }, [agent === null || agent === void 0 ? void 0 : agent.id, fireAnalytics, isStarred, resourceClient, starCount]);
+  }, [agent === null || agent === void 0 ? void 0 : agent.id, fireAnalytics, fireEventNext, isStarred, resourceClient, starCount]);
   const handleOnDelete = useCallback(async () => {
     if (agent && onDeleteAgent) {
       // Optimistically remove from cache
@@ -95,7 +101,7 @@ const AgentProfileCard = ({
         restore
       } = onDeleteAgent(agent.id);
       try {
-        await resourceClient.deleteAgent(agent.id, fireAnalytics);
+        await resourceClient.deleteAgent(agent.id, fireAnalytics, fireEventNext);
         addFlag === null || addFlag === void 0 ? void 0 : addFlag({
           title: formatMessage(messages.agentDeletedSuccessFlagTitle),
           description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
@@ -115,26 +121,31 @@ const AgentProfileCard = ({
         });
       }
     }
-  }, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics]);
+  }, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics, fireEventNext]);
   useEffect(() => {
     if (!isLoading && agent) {
-      fireAnalytics(profileCardRendered('agent', 'content'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireEventNext(`ui.rovoAgentProfilecard.rendered.content`, {
+          ...PACKAGE_META_DATA,
+          firedAt: Math.round(getPageTime())
+        });
+      } else {
+        fireAnalytics(profileCardRendered('agent', 'content'));
+      }
     }
-  }, [agent, fireAnalytics, isLoading]);
+  }, [agent, fireAnalytics, fireEventNext, isLoading]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
       profileType: "agent",
-      fireAnalytics: fireAnalytics
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireEventNext
     }));
   }
   if (hasError || !agent) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       errorType: errorType,
-      fireAnalytics: fireAnalytics
-      // TODO: Add fireAnalyticsNext
-      // NOTE: Add it to AgentProfileCardCompiled
-      ,
-      fireAnalyticsNext: () => {}
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireEventNext
     }));
   }
   return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/components/Agent/AgentProfileCardCompiled.js

@@ -4,9 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Stack } from '@atlaskit/primitives/compiled';
 import { AgentAvatar, AgentBanner, AgentProfileCreator, AgentProfileInfo, AgentStarCount } from '@atlaskit/rovo-agent-components';
-import { fireEvent, profileCardRendered } from '../../util/analytics';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
+import { fireEvent, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import { LoadingState } from '../common/LoadingState';
 import { ErrorMessage } from '../Error';
 import { AgentActions } from './Actions';
@@ -48,6 +51,9 @@ const AgentProfileCard = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireEvent: fireAnalyticsNext
+  } = useAnalyticsEventsNext();
   const userDefinedConversationStarters = agent === null || agent === void 0 ? void 0 : (_agent$user_defined_c = agent.user_defined_conversation_starters) === null || _agent$user_defined_c === void 0 ? void 0 : _agent$user_defined_c.map(starter => {
     return {
       message: starter,
@@ -69,7 +75,7 @@ const AgentProfileCard = ({
   const handleSetFavourite = useCallback(async () => {
     if (agent !== null && agent !== void 0 && agent.id) {
       try {
-        await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics);
+        await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics, fireAnalyticsNext);
         if (isStarred) {
           setStarCount(starCount ? starCount - 1 : 0);
         } else {
@@ -78,7 +84,7 @@ const AgentProfileCard = ({
         setIsStarred(!isStarred);
       } catch (error) {}
     }
-  }, [agent === null || agent === void 0 ? void 0 : agent.id, fireAnalytics, isStarred, resourceClient, starCount]);
+  }, [agent === null || agent === void 0 ? void 0 : agent.id, fireAnalytics, fireAnalyticsNext, isStarred, resourceClient, starCount]);
   const handleOnDelete = useCallback(async () => {
     if (agent && onDeleteAgent) {
       // Optimistically remove from cache
@@ -86,7 +92,7 @@ const AgentProfileCard = ({
         restore
       } = onDeleteAgent(agent.id);
       try {
-        await resourceClient.deleteAgent(agent.id, fireAnalytics);
+        await resourceClient.deleteAgent(agent.id, fireAnalytics, fireAnalyticsNext);
         addFlag === null || addFlag === void 0 ? void 0 : addFlag({
           title: formatMessage(messages.agentDeletedSuccessFlagTitle),
           description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
@@ -106,21 +112,29 @@ const AgentProfileCard = ({
         });
       }
     }
-  }, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics]);
+  }, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics, fireAnalyticsNext]);
   useEffect(() => {
     if (!isLoading && agent) {
-      fireAnalytics(profileCardRendered('agent', 'content'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext(`ui.rovoAgentProfilecard.rendered.content`, {
+          ...PACKAGE_META_DATA,
+          firedAt: Math.round(getPageTime())
+        });
+      } else {
+        fireAnalytics(profileCardRendered('agent', 'content'));
+      }
     }
-  }, [agent, fireAnalytics, isLoading]);
+  }, [agent, fireAnalytics, isLoading, fireAnalyticsNext]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
       profileType: "agent",
-      fireAnalytics: fireAnalytics
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireAnalyticsNext
     }));
   }
   if (hasError || !agent) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
-      fireAnalyticsNext: () => {},
+      fireAnalyticsNext: fireAnalyticsNext,
       errorType: errorType,
       fireAnalytics: fireAnalytics
     }));

package/dist/es2019/components/Agent/AgentProfileCardResourced.js

@@ -2,6 +2,7 @@ import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'reac
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { fireEvent } from '../../util/analytics';
 import { getAAIDFromARI } from '../../util/rovoAgentUtils';
 import ErrorMessage from '../Error/ErrorMessage';
@@ -14,6 +15,9 @@ export const AgentProfileCardResourced = props => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const fireAnalytics = useCallback(payload => {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, payload);
@@ -48,7 +52,7 @@ export const AgentProfileCardResourced = props => {
           if (!creatorUserId || !props.cloudId) {
             return undefined;
           }
-          const creatorInfo = await props.resourceClient.getProfile(creatorUserId, props.cloudId, fireAnalytics);
+          const creatorInfo = await props.resourceClient.getProfile(creatorUserId, props.cloudId, fireAnalytics, fireEventNext);
           return {
             type: 'CUSTOMER',
             name: creatorInfo.fullName,
@@ -61,14 +65,14 @@ export const AgentProfileCardResourced = props => {
       default:
         return undefined;
     }
-  }, [creatorUserId, fireAnalytics, props.cloudId, props.resourceClient, profileHref]);
+  }, [creatorUserId, fireAnalytics, fireEventNext, props.cloudId, props.resourceClient, profileHref]);
   const fetchData = useCallback(async () => {
     setIsLoading(true);
     try {
       const profileData = await props.resourceClient.getRovoAgentProfile({
         type: 'identity',
         value: props.accountId
-      }, fireAnalytics);
+      }, fireAnalytics, fireEventNext);
       const agentCreatorInfo = await getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
       setAgentData({
         ...profileData,
@@ -79,7 +83,7 @@ export const AgentProfileCardResourced = props => {
     } finally {
       setIsLoading(false);
     }
-  }, [fireAnalytics, getCreator, props.accountId, props.resourceClient]);
+  }, [fireAnalytics, fireEventNext, getCreator, props.accountId, props.resourceClient]);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -90,7 +94,7 @@ export const AgentProfileCardResourced = props => {
       },
       errorType: error || null,
       fireAnalytics: () => {},
-      fireAnalyticsNext: () => {}
+      fireAnalyticsNext: fireEventNext
     }));
   }
   return /*#__PURE__*/React.createElement(Suspense, {

package/dist/es2019/components/Agent/AgentProfileCardTrigger.js

@@ -3,6 +3,7 @@ import React, { forwardRef, Suspense, useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { fireEvent } from '../../util/analytics';
 import { getAAIDFromARI } from '../../util/rovoAgentUtils';
 import ProfileCardTrigger from '../common/ProfileCardTrigger';
@@ -21,6 +22,9 @@ export const AgentProfileCardTrigger = /*#__PURE__*/forwardRef(({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const fireAnalytics = useCallback(payload => {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, payload);
@@ -60,7 +64,7 @@ export const AgentProfileCardTrigger = /*#__PURE__*/forwardRef(({
             },
             cloudId
           });
-          const creatorInfo = await props.resourceClient.getProfile(cloudId, userId, fireAnalytics);
+          const creatorInfo = await props.resourceClient.getProfile(cloudId, userId, fireAnalytics, fireEventNext);
           return {
             type: 'CUSTOMER',
             name: creatorInfo.fullName,
@@ -78,7 +82,7 @@ export const AgentProfileCardTrigger = /*#__PURE__*/forwardRef(({
     const agentInfo = await resourceClient.getRovoAgentProfile({
       type: 'agent',
       value: userId
-    }, fireAnalytics);
+    }, fireAnalytics, fireEventNext);
     const agentCreatorInfo = await getCreator(agentInfo.creator_type, agentInfo.creator || undefined);
     return {
       ...agentInfo,
@@ -109,6 +113,7 @@ export const AgentProfileCardTrigger = /*#__PURE__*/forwardRef(({
     renderProfileCard: renderProfileCard,
     fetchProfile: fetchAgentProfile,
     fireAnalytics: fireAnalytics,
+    fireAnalyticsNext: fireEventNext,
     profileCardType: "agent"
   }));
 });

package/dist/es2019/components/Agent/hooks/useAgentActions.js

@@ -4,6 +4,7 @@ import { getATLContextUrl } from '@atlaskit/atlassian-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useRovoPostMessageToPubsub } from '@atlaskit/rovo-triggers';
 import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { fireEvent } from '../../../util/analytics';
 import { encodeParamsToUrl } from '../../../util/url';
 export const firstCharUpper = str => str.charAt(0).toUpperCase() + str.slice(1);
@@ -25,6 +26,9 @@ export const useAgentUrlActions = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const onEditAgent = useCallback(agentId => {
     const url = `${getATLContextUrl('home')}/chat/agents/${agentId}/edit`;
     const urlWithParams = encodeParamsToUrl(url, {
@@ -34,27 +38,41 @@ export const useAgentUrlActions = ({
       })
     });
     window.open(urlWithParams, '_blank', 'noopener, noreferrer');
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'button',
-      actionSubjectId: 'editAgentButton',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.editAgentButton', {
         agentId,
         source
-      }
-    });
-  }, [cloudId, createAnalyticsEvent, source]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'editAgentButton',
+        attributes: {
+          agentId,
+          source
+        }
+      });
+    }
+  }, [cloudId, createAnalyticsEvent, fireEventNext, source]);
   const onCopyAgent = agentId => {
     navigator.clipboard.writeText(`${window.location.origin}/people/agent/${agentId}`);
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'button',
-      actionSubjectId: 'copyAgentLinkButton',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.copyAgentLinkButton', {
         agentId,
         source
-      }
-    });
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'copyAgentLinkButton',
+        attributes: {
+          agentId,
+          source
+        }
+      });
+    }
   };
   const onDuplicateAgent = useCallback(agentId => {
     const baseUrl = `${getATLContextUrl('home')}/chat/agents/new`;
@@ -67,16 +85,23 @@ export const useAgentUrlActions = ({
       })
     });
     window.open(urlWithParams, '_blank', 'noopener, noreferrer');
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'button',
-      actionSubjectId: 'duplicateAgentButton',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.duplicateAgentButton', {
         agentId,
         source
-      }
-    });
-  }, [cloudId, createAnalyticsEvent, source]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'duplicateAgentButton',
+        attributes: {
+          agentId,
+          source
+        }
+      });
+    }
+  }, [cloudId, createAnalyticsEvent, fireEventNext, source]);
   const onConversationStarter = ({
     agentId,
     prompt
@@ -155,15 +180,22 @@ export const useAgentUrlActions = ({
     } else {
       window.open(`${window.location.origin}/people/agent/${agentId}`, '_blank', 'noopener, noreferrer');
     }
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'button',
-      actionSubjectId: 'viewAgentFullProfileButton',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.viewAgentFullProfileButton', {
         agentId,
         source
-      }
-    });
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'viewAgentFullProfileButton',
+        attributes: {
+          agentId,
+          source
+        }
+      });
+    }
   };
   return {
     onEditAgent,

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

@@ -1,20 +1,31 @@
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { AccessLockSVGWrapper, TeamForbiddenErrorStateWrapper } from '../../styled/TeamCard';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import AccessLockSVG from '../Error/AccessLockSVG';
 export default (props => {
   const {
-    analytics
+    analytics,
+    analyticsNext
   } = props;
   const intl = useIntl();
   useEffect(() => {
-    analytics(duration => profileCardRendered('team', 'error', {
-      duration
-    }));
-  }, [analytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', duration => ({
+        duration,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => profileCardRendered('team', 'error', {
+        duration
+      }));
+    }
+  }, [analytics, analyticsNext]);
   return /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapper, {
     testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/React.createElement(EmptyState, {

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

@@ -1,16 +1,27 @@
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { CardContent, CardHeader, CardWrapper, LoadingWrapper } from '../../styled/TeamTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export default (props => {
   const {
-    analytics
+    analytics,
+    analyticsNext
   } = props;
   useEffect(() => {
-    analytics(duration => profileCardRendered('team', 'spinner', {
-      duration
-    }));
-  }, [analytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.spinner', duration => ({
+        duration,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => profileCardRendered('team', 'spinner', {
+        duration
+      }));
+    }
+  }, [analytics, analyticsNext]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
     testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {