@atlaskit/profilecard 24.13.7 → 24.14.1

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

@@ -0,0 +1,233 @@
+/* AgentProfileCardCompiled.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./AgentProfileCardCompiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+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 { 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';
+var styles = {
+  detailWrapper: "_18zrpxbi _1q51xy5q",
+  avatarStyles: "_kqswstnw _154i1ejb _1ltvpxbi",
+  cardContainerStyles: "_2rko1mok _16qs1cd0 _kqswh2mm"
+};
+var AgentProfileCard = function AgentProfileCard(_ref) {
+  var _agent$user_defined_c, _agent$external_confi, _agent$external_confi2, _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
+  var agent = _ref.agent,
+    isLoading = _ref.isLoading,
+    cloudId = _ref.cloudId,
+    onChatClick = _ref.onChatClick,
+    hasError = _ref.hasError,
+    errorType = _ref.errorType,
+    onConversationStartersClick = _ref.onConversationStartersClick,
+    resourceClient = _ref.resourceClient,
+    addFlag = _ref.addFlag,
+    onDeleteAgent = _ref.onDeleteAgent;
+  var _useAgentUrlActions = useAgentUrlActions({
+      cloudId: cloudId || '',
+      source: 'agentProfileCard'
+    }),
+    _onEditAgent = _useAgentUrlActions.onEditAgent,
+    _onCopyAgent = _useAgentUrlActions.onCopyAgent,
+    _onDuplicateAgent = _useAgentUrlActions.onDuplicateAgent,
+    onOpenChatFullScreen = _useAgentUrlActions.onOpenChat,
+    onConversationStarter = _useAgentUrlActions.onConversationStarter,
+    onViewFullProfile = _useAgentUrlActions.onViewFullProfile;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isStarred = _useState2[0],
+    setIsStarred = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    starCount = _useState4[0],
+    setStarCount = _useState4[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var userDefinedConversationStarters = agent === null || agent === 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(function (starter) {
+    return {
+      message: starter,
+      type: 'user-defined'
+    };
+  });
+  useEffect(function () {
+    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]);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var fireAnalytics = useCallback(function (payload) {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, payload);
+    }
+  }, [createAnalyticsEvent]);
+  var handleSetFavourite = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(agent !== null && agent !== void 0 && agent.id)) {
+            _context.next = 10;
+            break;
+          }
+          _context.prev = 1;
+          _context.next = 4;
+          return resourceClient.setFavouriteAgent(agent.id, !isStarred, fireAnalytics);
+        case 4:
+          if (isStarred) {
+            setStarCount(starCount ? starCount - 1 : 0);
+          } else {
+            setStarCount((starCount || 0) + 1);
+          }
+          setIsStarred(!isStarred);
+          _context.next = 10;
+          break;
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](1);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 8]]);
+  })), [agent === null || agent === void 0 ? void 0 : agent.id, fireAnalytics, isStarred, resourceClient, starCount]);
+  var handleOnDelete = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _onDeleteAgent, restore;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (!(agent && onDeleteAgent)) {
+            _context2.next = 12;
+            break;
+          }
+          // Optimistically remove from cache
+          _onDeleteAgent = onDeleteAgent(agent.id), restore = _onDeleteAgent.restore;
+          _context2.prev = 2;
+          _context2.next = 5;
+          return resourceClient.deleteAgent(agent.id, fireAnalytics);
+        case 5:
+          addFlag === null || addFlag === void 0 || addFlag({
+            title: formatMessage(messages.agentDeletedSuccessFlagTitle),
+            description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
+              agentName: agent.name
+            }),
+            type: 'success',
+            id: 'ptc-directory.agent-profile.delete-agent-success'
+          });
+          _context2.next = 12;
+          break;
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](2);
+          // Restore agent to cache on error
+          restore();
+          addFlag === null || addFlag === void 0 || addFlag({
+            title: formatMessage(messages.agentDeletedErrorFlagTitle),
+            description: formatMessage(messages.agentDeletedErrorFlagDescription),
+            type: 'error',
+            id: 'ptc-directory.agent-profile.delete-agent-error'
+          });
+        case 12:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[2, 8]]);
+  })), [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireAnalytics]);
+  useEffect(function () {
+    if (!isLoading && agent) {
+      fireAnalytics(profileCardRendered('agent', 'content'));
+    }
+  }, [agent, fireAnalytics, isLoading]);
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
+      profileType: "agent",
+      fireAnalytics: fireAnalytics
+    }));
+  }
+  if (hasError || !agent) {
+    return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      fireAnalyticsNext: function 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: function onCreatorLinkClick() {}
+    }),
+    starCountRender: /*#__PURE__*/React.createElement(AgentStarCount, {
+      starCount: starCount,
+      isLoading: false
+    }),
+    agentDescription: agent.description
+  }), /*#__PURE__*/React.createElement(ConversationStarters, {
+    isAgentDefault: agent.is_default,
+    userDefinedConversationStarters: userDefinedConversationStarters,
+    onConversationStarterClick: function onConversationStarterClick(conversationStarter) {
+      onConversationStartersClick ? onConversationStartersClick(conversationStarter) : onConversationStarter({
+        agentId: agent.id,
+        prompt: conversationStarter.message
+      });
+    }
+  })), /*#__PURE__*/React.createElement(AgentActions, {
+    agent: agent,
+    onEditAgent: function onEditAgent() {
+      return _onEditAgent(agent.id);
+    },
+    onCopyAgent: function onCopyAgent() {
+      return _onCopyAgent(agent.id);
+    },
+    onDuplicateAgent: function onDuplicateAgent() {
+      return _onDuplicateAgent(agent.id);
+    },
+    onDeleteAgent: handleOnDelete,
+    onChatClick: onChatClick ? function (event) {
+      return onChatClick(event);
+    } : function () {
+      return onOpenChatFullScreen(agent.id, agent.name);
+    },
+    resourceClient: resourceClient,
+    onViewFullProfileClick: function onViewFullProfileClick() {
+      return onViewFullProfile(agent.id);
+    }
+  })));
+};
+export default AgentProfileCard;

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

@@ -148,7 +148,8 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
         fetchData();
       },
       errorType: error || null,
-      fireAnalytics: function fireAnalytics() {}
+      fireAnalytics: function fireAnalytics() {},
+      fireAnalyticsNext: function fireAnalyticsNext() {}
     }));
   }
   return /*#__PURE__*/React.createElement(Suspense, {

package/dist/esm/components/Agent/AgentProfileCardWrapper.compiled.css

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

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

@@ -1,13 +1,14 @@
+/* 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';
-var styles = xcss({
-  width: '360px'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapper: "_1bsb1gwv"
+};
 export var AgentProfileCardWrapper = function AgentProfileCardWrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles
+    xcss: styles.wrapper
   }, children);
 };

package/dist/esm/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 var ConversationStarters = function ConversationStarters(_ref) {
   var isAgentDefault = _ref.isAgentDefault,

package/dist/esm/components/Error/ErrorMessage.js

@@ -1,25 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect } from 'react';
 import Button from '@atlaskit/button/new';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
-// 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 { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ErrorTitle, ErrorWrapper } from '../../styled/Error';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 var ErrorMessage = function ErrorMessage(props) {
   var errorType = props.errorType || {
     reason: 'default'
   };
   var errorReason = errorType.reason;
   var fireAnalytics = props.fireAnalytics,
+    fireAnalyticsNext = props.fireAnalyticsNext,
     reload = props.reload;
   var hasRetry = !!reload;
   useEffect(function () {
-    fireAnalytics(profileCardRendered('user', 'error', {
-      hasRetry: hasRetry,
-      errorType: errorReason
-    }));
-  }, [errorReason, fireAnalytics, hasRetry]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.error', _objectSpread({
+        hasRetry: hasRetry,
+        errorType: errorReason,
+        firedAt: Math.round(performance.now())
+      }, PACKAGE_META_DATA));
+    } else {
+      fireAnalytics(profileCardRendered('user', 'error', {
+        hasRetry: hasRetry,
+        errorType: errorReason
+      }));
+    }
+  }, [errorReason, fireAnalytics, fireAnalyticsNext, hasRetry]);
   var errorContent = function errorContent() {
     if (errorReason === 'NotFound') {
       return /*#__PURE__*/React.createElement(ErrorTitle, null, "The user is no longer available for the site");

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

@@ -14,8 +14,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { layers } from '@atlaskit/theme/constants';
 import _filterActions from '../../internal/filterActions';
 import messages from '../../messages';

package/dist/esm/components/User/OverflowProfileCardButtons.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["triggerRef", "isSelected", "testId"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
@@ -10,7 +13,8 @@ import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { OverflowActionButtonsWrapper } from '../../styled/Card';
-import { moreActionsClicked } from '../../util/analytics';
+import { moreActionsClicked, PACKAGE_META_DATA } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export var ACTION_OVERFLOW_THRESHOLD = 2;
 export var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
   var intl = useIntl();
@@ -19,22 +23,33 @@ export var OverflowProfileCardButtons = function OverflowProfileCardButtons(prop
     setOpen = _useState2[1];
   var actions = props.actions,
     onItemClick = props.onItemClick,
-    fireAnalyticsWithDuration = props.fireAnalyticsWithDuration;
+    fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = props.fireAnalyticsWithDurationNext;
   var numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
   var onOpenChange = useCallback(function (_ref) {
     var nextOpen = _ref.isOpen;
     setOpen(function (prevOpen) {
       if (nextOpen && !prevOpen) {
-        fireAnalyticsWithDuration(function (duration) {
-          return moreActionsClicked('user', {
-            duration: duration,
-            numActions: numActions
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          fireAnalyticsWithDurationNext('ui.profilecard.clicked.moreActions', function (duration) {
+            return _objectSpread({
+              duration: duration,
+              numActions: numActions,
+              firedAt: Math.round(getPageTime())
+            }, PACKAGE_META_DATA);
           });
-        });
+        } else {
+          fireAnalyticsWithDuration(function (duration) {
+            return moreActionsClicked('user', {
+              duration: duration,
+              numActions: numActions
+            });
+          });
+        }
       }
       return nextOpen;
     });
-  }, [numActions, fireAnalyticsWithDuration]);
+  }, [numActions, fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, {
     testId: "profilecard-actions-overflow"
   }, /*#__PURE__*/React.createElement(DropdownMenu, {

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

@@ -1,18 +1,23 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 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';
@@ -58,6 +63,8 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     _useState2 = _slicedToArray(_useState, 1),
     openTime = _useState2[0];
   var createAnalyticsEvent = props.createAnalyticsEvent;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEventNext = _useAnalyticsEvents.fireEvent;
   var fireAnalytics = useCallback(function (payload) {
     if (createAnalyticsEvent) {
       fireEvent(createAnalyticsEvent, payload);
@@ -68,6 +75,11 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     var event = generator(elapsed);
     fireAnalytics(event);
   }, [fireAnalytics, openTime]);
+  var fireAnalyticsWithDurationNext = useCallback(function (eventKey, generator) {
+    var duration = getPageTime() - openTime;
+    var attributes = generator(duration);
+    fireEventNext(eventKey, attributes);
+  }, [openTime, fireEventNext]);
   var _useKudos = useKudos(props.cloudId, props.userId, props.teamCentralBaseUrl, props.openKudosDrawer),
     kudosAction = _useKudos.kudosAction;
   var _props$actions = props.actions,
@@ -88,24 +100,36 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
   var canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
   useEffect(function () {
     if (canRender) {
-      fireAnalyticsWithDuration(function (duration) {
-        return profileCardRendered('user', 'content', {
-          duration: duration,
-          numActions: realActions.length
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.rendered.content', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: realActions.length,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return profileCardRendered('user', 'content', {
+            duration: 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) {
@@ -121,36 +145,53 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     borderColor: "var(--ds-shadow-overlay, ".concat(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: fullName,
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
-    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
 var Actions = function Actions(_ref) {
   var actions = _ref.actions,
     fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = _ref.fireAnalyticsWithDurationNext,
     isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard,
     fullName = _ref.fullName;
   var onActionClick = useCallback(function (action, args, event, index) {
-    fireAnalyticsWithDuration(function (duration) {
-      return actionClicked('user', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || 'no-id-specified'
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.action', function (duration) {
+        return _objectSpread({
+          method: 'click',
+          firedAt: Math.round(getPageTime()),
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return actionClicked('user', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || 'no-id-specified'
+        });
+      });
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       action.callback.apply(action, [event].concat(_toConsumableArray(args)));
     }
-  }, [fireAnalyticsWithDuration]);
+  }, [fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -184,6 +225,7 @@ var Actions = function Actions(_ref) {
   }), overflowActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, _extends({
     actions: overflowActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext,
     onItemClick: function onItemClick(action, args, event, index) {
       return onActionClick(action, args, event, index + ACTION_OVERFLOW_THRESHOLD);
     }
@@ -191,17 +233,27 @@ var Actions = function Actions(_ref) {
     fullName: fullName
   })));
 };
-var LoadingView = function LoadingView(_ref2) {
-  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration;
+export var LoadingView = function LoadingView(_ref2) {
+  var fireAnalyticsWithDuration = _ref2.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = _ref2.fireAnalyticsWithDurationNext;
   useEffect(function () {
-    fireAnalyticsWithDuration(function (duration) {
-      return profileCardRendered('user', 'spinner', {
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.rendered.spinner', function (duration) {
+        return _objectSpread({
+          firedAt: Math.round(getPageTime()),
+          duration: duration
+        }, PACKAGE_META_DATA);
+      });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return profileCardRendered('user', 'spinner', {
+          duration: duration
+        });
       });
-    });
-  }, [fireAnalyticsWithDuration]);
+    }
+  }, [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/esm/components/User/ProfileCardDetails.compiled.css

@@ -5,7 +5,6 @@
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
-._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1hpmutpp#profilecard-name-label{margin-top:var(--ds-space-150,9pt)}

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

@@ -9,16 +9,13 @@ import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 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 { Box } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
 import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
 import { IconLabel } from '../Icon';
 import ReportingLinesDetails from './ReportingLinesDetails';
 var styles = {
-  detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",
@@ -134,6 +131,7 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,
     onReportingLinesClick: props.onReportingLinesClick,
-    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext: props.fireAnalyticsWithDurationNext
   }));
 };