@atlaskit/profilecard 24.14.0 → 24.15.0

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

@@ -0,0 +1,200 @@
+/* AgentProfileCardCompiled.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./AgentProfileCardCompiled.compiled.css";
+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 { 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';
+import { AgentProfileCardWrapper } from './AgentProfileCardWrapper';
+import { ConversationStarters } from './ConversationStarters';
+import { useAgentUrlActions } from './hooks/useAgentActions';
+import { messages } from './messages';
+const styles = {
+  detailWrapper: "_18zrpxbi _1q51xy5q",
+  avatarStyles: "_kqswstnw _154i1ejb _1ltvpxbi",
+  cardContainerStyles: "_2rko1mok _16qs1cd0 _kqswh2mm"
+};
+const AgentProfileCard = ({
+  agent,
+  isLoading,
+  cloudId,
+  onChatClick,
+  hasError,
+  errorType,
+  onConversationStartersClick,
+  resourceClient,
+  addFlag,
+  onDeleteAgent
+}) => {
+  var _agent$user_defined_c, _agent$external_confi, _agent$external_confi2, _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
+  const {
+    onEditAgent,
+    onCopyAgent,
+    onDuplicateAgent,
+    onOpenChat: onOpenChatFullScreen,
+    onConversationStarter,
+    onViewFullProfile
+  } = useAgentUrlActions({
+    cloudId: cloudId || '',
+    source: 'agentProfileCard'
+  });
+  const [isStarred, setIsStarred] = useState(false);
+  const [starCount, setStarCount] = useState();
+  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,
+      type: 'user-defined'
+    };
+  });
+  useEffect(() => {
+    setIsStarred(!!(agent !== null && agent !== void 0 && agent.favourite));
+    setStarCount(agent === null || agent === void 0 ? void 0 : agent.favourite_count);
+  }, [agent === null || agent === void 0 ? void 0 : agent.favourite, agent === null || agent === void 0 ? void 0 : agent.favourite_count]);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const fireAnalytics = useCallback(payload => {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, payload);
+    }
+  }, [createAnalyticsEvent]);
+  const handleSetFavourite = useCallback(async () => {
+    if (agent !== null && agent !== void 0 && agent.id) {
+      try {
+        await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics, fireAnalyticsNext);
+        if (isStarred) {
+          setStarCount(starCount ? starCount - 1 : 0);
+        } else {
+          setStarCount((starCount || 0) + 1);
+        }
+        setIsStarred(!isStarred);
+      } catch (error) {}
+    }
+  }, [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
+      const {
+        restore
+      } = onDeleteAgent(agent.id);
+      try {
+        await resourceClient.deleteAgent(agent.id, fireAnalytics, fireAnalyticsNext);
+        addFlag === null || addFlag === void 0 ? void 0 : addFlag({
+          title: formatMessage(messages.agentDeletedSuccessFlagTitle),
+          description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
+            agentName: agent.name
+          }),
+          type: 'success',
+          id: 'ptc-directory.agent-profile.delete-agent-success'
+        });
+      } catch (error) {
+        // Restore agent to cache on error
+        restore();
+        addFlag === null || addFlag === void 0 ? void 0 : addFlag({
+          title: formatMessage(messages.agentDeletedErrorFlagTitle),
+          description: formatMessage(messages.agentDeletedErrorFlagDescription),
+          type: 'error',
+          id: 'ptc-directory.agent-profile.delete-agent-error'
+        });
+      }
+    }
+  }, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics, fireAnalyticsNext]);
+  useEffect(() => {
+    if (!isLoading && agent) {
+      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, fireAnalyticsNext]);
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
+      profileType: "agent",
+      fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireAnalyticsNext
+    }));
+  }
+  if (hasError || !agent) {
+    return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      fireAnalyticsNext: fireAnalyticsNext,
+      errorType: errorType,
+      fireAnalytics: fireAnalytics
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.cardContainerStyles
+  }, /*#__PURE__*/React.createElement(AgentBanner, {
+    agentId: agent.id,
+    agentNamedId: (_agent$external_confi = agent.external_config_reference) !== null && _agent$external_confi !== void 0 ? _agent$external_confi : agent.named_id,
+    height: 96,
+    agentIdentityAccountId: agent.identity_account_id
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarStyles
+  }, /*#__PURE__*/React.createElement(AgentAvatar, {
+    agentId: agent.id,
+    agentNamedId: (_agent$external_confi2 = agent.external_config_reference) !== null && _agent$external_confi2 !== void 0 ? _agent$external_confi2 : agent.named_id,
+    agentIdentityAccountId: agent.identity_account_id,
+    size: "xlarge",
+    isForgeAgent: agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY',
+    forgeAgentIconUrl: agent.icon
+  })), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    xcss: styles.detailWrapper
+  }, /*#__PURE__*/React.createElement(AgentProfileInfo, {
+    agentName: agent.name,
+    isStarred: isStarred,
+    onStarToggle: handleSetFavourite,
+    isHidden: agent.visibility === 'PRIVATE',
+    creatorRender: ((_agent$creatorInfo = agent.creatorInfo) === null || _agent$creatorInfo === void 0 ? void 0 : _agent$creatorInfo.type) && /*#__PURE__*/React.createElement(AgentProfileCreator, {
+      creator: {
+        type: (_agent$creatorInfo2 = agent.creatorInfo) === null || _agent$creatorInfo2 === void 0 ? void 0 : _agent$creatorInfo2.type,
+        name: ((_agent$creatorInfo3 = agent.creatorInfo) === null || _agent$creatorInfo3 === void 0 ? void 0 : _agent$creatorInfo3.name) || '',
+        profileLink: ((_agent$creatorInfo4 = agent.creatorInfo) === null || _agent$creatorInfo4 === void 0 ? void 0 : _agent$creatorInfo4.profileLink) || ''
+      },
+      isLoading: false,
+      onCreatorLinkClick: () => {}
+    }),
+    starCountRender: /*#__PURE__*/React.createElement(AgentStarCount, {
+      starCount: starCount,
+      isLoading: false
+    }),
+    agentDescription: agent.description
+  }), /*#__PURE__*/React.createElement(ConversationStarters, {
+    isAgentDefault: agent.is_default,
+    userDefinedConversationStarters: userDefinedConversationStarters,
+    onConversationStarterClick: conversationStarter => {
+      onConversationStartersClick ? onConversationStartersClick(conversationStarter) : onConversationStarter({
+        agentId: agent.id,
+        prompt: conversationStarter.message
+      });
+    }
+  })), /*#__PURE__*/React.createElement(AgentActions, {
+    agent: agent,
+    onEditAgent: () => onEditAgent(agent.id),
+    onCopyAgent: () => onCopyAgent(agent.id),
+    onDuplicateAgent: () => onDuplicateAgent(agent.id),
+    onDeleteAgent: handleOnDelete,
+    onChatClick: onChatClick ? event => onChatClick(event) : () => onOpenChatFullScreen(agent.id, agent.name),
+    resourceClient: resourceClient,
+    onViewFullProfileClick: () => onViewFullProfile(agent.id)
+  })));
+};
+export default AgentProfileCard;

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/AgentProfileCardWrapper.compiled.css

@@ -0,0 +1 @@
+._1bsb1gwv{width:360px}

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

@@ -1,14 +1,15 @@
+/* AgentProfileCardWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./AgentProfileCardWrapper.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// 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';
-const styles = xcss({
-  width: '360px'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_1bsb1gwv"
+};
 export const AgentProfileCardWrapper = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles
+    xcss: styles.wrapper
   }, children);
 };

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

@@ -1,7 +1,5 @@
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Stack } from '@atlaskit/primitives';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { AgentConversationStarters } from '@atlaskit/rovo-agent-components';
 export const ConversationStarters = ({
   isAgentDefault,

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/Error/ErrorMessage.js

@@ -3,8 +3,7 @@ import Button from '@atlaskit/button/new';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
 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 { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ErrorTitle, ErrorWrapper } from '../../styled/Error';
 import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 const ErrorMessage = props => {

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, {