@atlaskit/profilecard 16.11.0 → 17.0.0

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileCardDetails = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
+
+var _messages = _interopRequireDefault(require("../../messages"));
+
+var _Card = require("../../styled/Card");
+
+var _Icon = require("../Icon");
+
+var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
+
+var _excluded = ["text"];
+
+var renderName = function renderName(nickname, fullName, meta) {
+  if (!fullName && !nickname) {
+    return null;
+  }
+
+  var isNicknameRedundant = !nickname || nickname === fullName;
+  var shownNickname = " (".concat(nickname, ") ");
+  var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
+  return /*#__PURE__*/_react.default.createElement(_Card.FullNameLabel, {
+    noMeta: !meta,
+    "data-testid": "profilecard-name"
+  }, displayName);
+};
+
+var disabledAccountDesc = function disabledAccountDesc(statusModifiedDate, disabledAccountMessage) {
+  var status = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'closed';
+
+  // consumer does not want to use built-in message
+  if (disabledAccountMessage) {
+    return disabledAccountMessage;
+  }
+
+  var date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
+  var relativeDateKey = (0, _relativeDate.default)(date);
+  var msgKey = relativeDateKey ? "".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey) : "".concat(status, "AccountDescMsgNoDate");
+
+  var secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default[msgKey]);
+
+  return /*#__PURE__*/_react.default.createElement("p", {
+    "data-testid": "profilecard-disabled-account"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.generalDescMsgForDisabledUser), ' ', secondSentence);
+};
+
+var CustomLozenges = function CustomLozenges(_ref) {
+  var _ref$lozenges = _ref.lozenges,
+      lozenges = _ref$lozenges === void 0 ? [] : _ref$lozenges;
+
+  if (lozenges.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Card.CustomLozengeContainer, null, lozenges.map(function (_ref2, index) {
+    var text = _ref2.text,
+        otherProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({}, otherProps, {
+      key: index
+    }), text);
+  }));
+};
+
+var BotProfileCardDetails = function BotProfileCardDetails(props) {
+  var fullName = props.fullName,
+      nickname = props.nickname;
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, "App"));
+};
+
+var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
+  var companyName = props.companyName,
+      disabledAccountMessage = props.disabledAccountMessage,
+      fullName = props.fullName,
+      _props$hasDisabledAcc = props.hasDisabledAccountLozenge,
+      hasDisabledAccountLozenge = _props$hasDisabledAcc === void 0 ? true : _props$hasDisabledAcc,
+      nickname = props.nickname,
+      status = props.status,
+      statusModifiedDate = props.statusModifiedDate;
+  var name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.disabledAccountDefaultName);
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, /*#__PURE__*/_react.default.createElement(_Card.FullNameLabel, {
+    noMeta: true,
+    isDisabledAccount: true,
+    "data-testid": "profilecard-name"
+  }, name), hasDisabledAccountLozenge && /*#__PURE__*/_react.default.createElement(_Card.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: "default",
+    isBold: true
+  }, status === 'inactive' ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.inactiveAccountMsg) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, disabledAccountDesc(statusModifiedDate, disabledAccountMessage, status)), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "companyName"
+  }, companyName));
+};
+
+var ProfileCardDetails = function ProfileCardDetails(props) {
+  var meta = props.meta,
+      status = props.status;
+
+  if (props.isBot) {
+    return /*#__PURE__*/_react.default.createElement(BotProfileCardDetails, props);
+  }
+
+  if (status === 'inactive' || status === 'closed') {
+    return /*#__PURE__*/_react.default.createElement(DisabledProfileCardDetails, (0, _extends2.default)({}, props, {
+      status: status
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), /*#__PURE__*/_react.default.createElement(CustomLozenges, {
+    lozenges: props.customLozenges
+  }), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "email"
+  }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "time"
+  }, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "companyName"
+  }, props.companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "location"
+  }, props.location), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
+    reportingLines: props.reportingLines,
+    reportingLinesProfileUrl: props.reportingLinesProfileUrl,
+    onReportingLinesClick: props.onReportingLinesClick,
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+  }));
+};
+
+exports.ProfileCardDetails = ProfileCardDetails;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ProfileCardResourcedInternal = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,14 +29,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _giveKudos = require("@atlaskit/give-kudos");
+var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _analytics = require("../../internal/analytics");
+var _giveKudos = require("@atlaskit/give-kudos");
 
 var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
 
 var _Card = require("../../styled/Card");
 
+var _analytics = require("../../util/analytics");
+
 var _Error = require("../Error");
 
 var _ProfileCard = _interopRequireDefault(require("./ProfileCard"));
@@ -81,12 +83,14 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       isKudosEnabled: false,
       kudosDrawerOpen: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "callAnalytics", function (id) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var analytics = _this.props.analytics;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (payload) {
+      // Don't fire analytics if the component is unmounted
+      if (!_this._isMounted) {
+        return;
+      }
 
-      if (analytics) {
-        analytics(id, options);
+      if (_this.props.createAnalyticsEvent) {
+        (0, _analytics.fireEvent)(_this.props.createAnalyticsEvent, payload);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clientFetchProfile", function () {
@@ -105,7 +109,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId, _this.fireAnalytics), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
         requests.then(function (res) {
           var _this2;
 
@@ -146,17 +150,12 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           userId = _this$props2.userId,
           cloudId = _this$props2.cloudId,
           resourceClient = _this$props2.resourceClient;
-      var hasError = this.state.hasError;
 
       if (userId !== prevProps.userId || cloudId !== prevProps.cloudId || resourceClient !== prevProps.resourceClient) {
         this.setState({
           isLoading: undefined
         }, this.clientFetchProfile);
       }
-
-      if (hasError !== prevState.hasError && hasError) {
-        this.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_RESOURCED_ERROR);
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -202,7 +201,6 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           reportingLinesData = _this$state.reportingLinesData,
           isKudosEnabled = _this$state.isKudosEnabled;
       var _this$props3 = this.props,
-          analytics = _this$props3.analytics,
           onReportingLinesClick = _this$props3.onReportingLinesClick,
           cloudId = _this$props3.cloudId,
           userId = _this$props3.userId,
@@ -210,11 +208,14 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
       if (isFetchingOrNotStartToFetchYet) {
-        return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, null));
+        return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
+          fireAnalytics: this.fireAnalytics
+        }));
       } else if (hasError) {
         return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
           errorType: error,
-          reload: this.clientFetchProfile
+          reload: this.clientFetchProfile,
+          fireAnalytics: this.fireAnalytics
         }));
       }
 
@@ -222,7 +223,6 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: hasError,
         errorType: error,
         clientFetchProfile: this.clientFetchProfile,
-        analytics: analytics,
         reportingLines: reportingLinesData,
         onReportingLinesClick: onReportingLinesClick,
         cloudId: cloudId,
@@ -255,7 +255,12 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
   return ProfileCardResourced;
 }(_react.default.PureComponent);
 
-exports.default = ProfileCardResourced;
 (0, _defineProperty2.default)(ProfileCardResourced, "defaultProps", {
   actions: []
-});
+});
+var ProfileCardResourcedInternal = ProfileCardResourced;
+exports.ProfileCardResourcedInternal = ProfileCardResourcedInternal;
+
+var _default = (0, _analyticsNext.withAnalyticsEvents)()(ProfileCardResourced);
+
+exports.default = _default;

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

@@ -31,6 +31,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _giveKudos = require("@atlaskit/give-kudos");
 
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
@@ -41,6 +43,8 @@ var _filterActions2 = _interopRequireDefault(require("../../internal/filterActio
 
 var _Card = require("../../styled/Card");
 
+var _analytics = require("../../util/analytics");
+
 var _config = require("../../util/config");
 
 var _lazyProfileCard = require("./lazyProfileCard");
@@ -81,6 +85,16 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideDelay", _this.props.trigger === 'click' ? 0 : _config.DELAY_MS_HIDE);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showTimer", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideTimer", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (payload) {
+      // Don't fire any analytics if the component is unmounted
+      if (!_this._isMounted) {
+        return;
+      }
+
+      if (_this.props.createAnalyticsEvent) {
+        (0, _analytics.fireEvent)(_this.props.createAnalyticsEvent, payload);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideProfilecard", function () {
       clearTimeout(_this.showTimer);
       clearTimeout(_this.hideTimer);
@@ -110,9 +124,20 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       event.stopPropagation();
 
       _this.showProfilecard();
+
+      if (!_this.state.visible) {
+        _this.fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function () {
+      _this.showProfilecard();
+
+      if (!_this.state.visible) {
+        _this.fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerListeners", _this.props.trigger === 'hover' ? {
-      onMouseEnter: _this.showProfilecard,
+      onMouseEnter: _this.onMouseEnter,
       onMouseLeave: _this.hideProfilecard
     } : {
       onClick: _this.onClick
@@ -152,7 +177,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId, _this.fireAnalytics), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
         requests.then(function (res) {
           var _this2;
 
@@ -180,7 +205,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       var isLoading = _this.state.isLoading;
 
       if (isLoading === true || isLoading === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, null));
+        return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
+          fireAnalytics: _this.fireAnalytics
+        }));
       } else {
         return _this.renderProfileCard();
       }
@@ -256,8 +283,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       var newProps = _objectSpread(_objectSpread({
         userId: this.props.userId,
         isCurrentUser: (_this$state$data = this.state.data) === null || _this$state$data === void 0 ? void 0 : _this$state$data.isCurrentUser,
-        clientFetchProfile: this.clientFetchProfile,
-        analytics: this.props.analytics
+        clientFetchProfile: this.clientFetchProfile
       }, this.state.data), {}, {
         reportingLines: this.state.reportingLinesData,
         onReportingLinesClick: this.props.onReportingLinesClick,
@@ -268,7 +294,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
-        onMouseEnter: this.showProfilecard,
+        onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.hideProfilecard
       } : {};
       return /*#__PURE__*/_react.default.createElement("div", wrapperProps, this.state.visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
@@ -333,5 +359,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   trigger: 'hover',
   position: 'bottom-start'
 });
-var _default = ProfilecardTrigger;
+
+var _default = (0, _analyticsNext.withAnalyticsEvents)()(ProfilecardTrigger);
+
 exports.default = _default;

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

@@ -17,12 +17,12 @@ var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _analytics = require("../../internal/analytics");
-
 var _messages = _interopRequireDefault(require("../../messages"));
 
 var _ReportingLines = require("../../styled/ReportingLines");
 
+var _analytics = require("../../util/analytics");
+
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -30,13 +30,11 @@ function getProfileHref(userId, profileUrl) {
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _manager$pii, _manager$pii2;
 
-  var _props$reportingLines = props.reportingLines,
+  var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+      _props$reportingLines = props.reportingLines,
       reportingLines = _props$reportingLines === void 0 ? {} : _props$reportingLines,
       reportingLinesProfileUrl = props.reportingLinesProfileUrl,
-      onReportingLinesClick = props.onReportingLinesClick,
-      _props$analytics = props.analytics,
-      analytics = _props$analytics === void 0 ? function () {} : _props$analytics,
-      getDuration = props.getDuration;
+      onReportingLinesClick = props.onReportingLinesClick;
   var _reportingLines$manag = reportingLines.managers,
       managers = _reportingLines$manag === void 0 ? [] : _reportingLines$manag,
       _reportingLines$repor = reportingLines.reports,
@@ -44,11 +42,13 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var manager = managers.length >= 1 ? managers[0] : undefined;
   var hasReports = reports.length > 0;
 
-  var getReportingLinesOnClick = function getReportingLinesOnClick(user, analyticsId) {
+  var getReportingLinesOnClick = function getReportingLinesOnClick(user, userType) {
     return onReportingLinesClick ? function () {
-      analytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
-        id: analyticsId,
-        duration: getDuration()
+      fireAnalyticsWithDuration(function (duration) {
+        return (0, _analytics.reportingLinesClicked)({
+          duration: duration,
+          userType: userType
+        });
       });
       onReportingLinesClick(user);
     } : undefined;
@@ -62,7 +62,7 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     appearance: "subtle",
     spacing: "none",
     href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
-    onClick: getReportingLinesOnClick(manager, 'reporting-lines-manager'),
+    onClick: getReportingLinesOnClick(manager, 'manager'),
     isDisabled: !onReportingLinesClick
   }, /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerSection, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
     size: "xsmall",
@@ -78,7 +78,7 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
         name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
         src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
         href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
-        onClick: getReportingLinesOnClick(member, 'reporting-lines-direct-report')
+        onClick: getReportingLinesOnClick(member, 'direct-report')
       };
     }),
     maxCount: 5,

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

@@ -2,18 +2,30 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _Card = require("../../styled/Card");
 
-var UserLoadingState = function UserLoadingState() {
+var _analytics = require("../../util/analytics");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var UserLoadingState = function UserLoadingState(_ref) {
+  var fireAnalytics = _ref.fireAnalytics;
+  (0, _react.useEffect)(function () {
+    fireAnalytics((0, _analytics.profileCardRendered)('user', 'spinner'));
+  }, [fireAnalytics]);
   return /*#__PURE__*/_react.default.createElement(_Card.SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
 };
 

package/dist/cjs/util/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.teamRequestAnalytics = exports.teamProfileCardRendered = exports.teamCardTriggered = exports.teamAvatarClicked = exports.teamActionClicked = exports.moreMembersClicked = exports.moreActionsClicked = exports.fireEvent = exports.errorRetryClicked = void 0;
+exports.userRequestAnalytics = exports.teamRequestAnalytics = exports.teamAvatarClicked = exports.reportingLinesClicked = exports.profileCardRendered = exports.moreMembersClicked = exports.moreActionsClicked = exports.fireEvent = exports.errorRetryClicked = exports.cardTriggered = exports.actionClicked = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -19,8 +19,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ANALYTICS_CHANNEL = 'peopleTeams';
 
 var runItLater = function runItLater(cb) {
-  if (window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(cb);
+  var requestIdleCallback = window.requestIdleCallback;
+
+  if (typeof requestIdleCallback === 'function') {
+    return requestIdleCallback(cb);
   }
 
   if (typeof window.requestAnimationFrame === 'function') {
@@ -46,6 +48,7 @@ var fireEvent = function fireEvent(createAnalyticsEvent, body) {
 
 exports.fireEvent = fireEvent;
 var TEAM_SUBJECT = 'teamProfileCard';
+var USER_SUBJECT = 'profilecard';
 
 var createEvent = function createEvent(eventType, action, actionSubject, actionSubjectId) {
   var attributes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
@@ -56,20 +59,20 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.11.0"
+      packageVersion: "17.0.0"
     }, attributes), {}, {
-      firedAt: (0, _performance.getPageTime)()
+      firedAt: Math.round((0, _performance.getPageTime)())
     })
   };
 };
 
-var teamCardTriggered = function teamCardTriggered(method) {
-  return createEvent('ui', 'triggered', TEAM_SUBJECT, undefined, {
+var cardTriggered = function cardTriggered(type, method) {
+  return createEvent('ui', 'triggered', type === 'user' ? USER_SUBJECT : TEAM_SUBJECT, undefined, {
     method: method
   });
 };
 
-exports.teamCardTriggered = teamCardTriggered;
+exports.cardTriggered = cardTriggered;
 
 var teamRequestAnalytics = function teamRequestAnalytics(action, attributes) {
   return createEvent('operational', action, TEAM_SUBJECT, 'request', attributes);
@@ -77,20 +80,32 @@ var teamRequestAnalytics = function teamRequestAnalytics(action, attributes) {
 
 exports.teamRequestAnalytics = teamRequestAnalytics;
 
-var teamProfileCardRendered = function teamProfileCardRendered(actionSubjectId, attributes) {
-  return createEvent('ui', 'rendered', TEAM_SUBJECT, actionSubjectId, attributes);
+var userRequestAnalytics = function userRequestAnalytics(action, attributes) {
+  return createEvent('operational', action, USER_SUBJECT, 'request', attributes);
+};
+
+exports.userRequestAnalytics = userRequestAnalytics;
+
+var profileCardRendered = function profileCardRendered(type, actionSubjectId, attributes) {
+  return createEvent('ui', 'rendered', type === 'user' ? USER_SUBJECT : TEAM_SUBJECT, actionSubjectId, attributes);
+};
+
+exports.profileCardRendered = profileCardRendered;
+
+var actionClicked = function actionClicked(type, attributes) {
+  return createEvent('ui', 'clicked', type === 'user' ? USER_SUBJECT : TEAM_SUBJECT, 'action', attributes);
 };
 
-exports.teamProfileCardRendered = teamProfileCardRendered;
+exports.actionClicked = actionClicked;
 
-var teamActionClicked = function teamActionClicked(attributes) {
-  return createEvent('ui', 'clicked', TEAM_SUBJECT, 'action', attributes);
+var reportingLinesClicked = function reportingLinesClicked(attributes) {
+  return createEvent('ui', 'clicked', USER_SUBJECT, 'reportingLines', attributes);
 };
 
-exports.teamActionClicked = teamActionClicked;
+exports.reportingLinesClicked = reportingLinesClicked;
 
-var moreActionsClicked = function moreActionsClicked(attributes) {
-  return createEvent('ui', 'clicked', TEAM_SUBJECT, 'moreActions', attributes);
+var moreActionsClicked = function moreActionsClicked(type, attributes) {
+  return createEvent('ui', 'clicked', type === 'user' ? USER_SUBJECT : TEAM_SUBJECT, 'moreActions', attributes);
 };
 
 exports.moreActionsClicked = moreActionsClicked;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.11.0"
+	"version": "17.0.0"
 }

package/dist/es2019/client/ProfileCardClient.js

@@ -17,8 +17,8 @@ class ProfileCardClient {
     (_this$tcClient = this.tcClient) === null || _this$tcClient === void 0 ? void 0 : _this$tcClient.flushCache();
   }
 
-  getProfile(cloudId, userId) {
-    return this.userClient.getProfile(cloudId, userId);
+  getProfile(cloudId, userId, analytics) {
+    return this.userClient.getProfile(cloudId, userId, analytics);
   }
 
   getTeamProfile(teamId, orgId, analytics) {

package/dist/es2019/client/TeamProfileCardClient.js

@@ -1,6 +1,7 @@
 import { teamRequestAnalytics } from '../util/analytics';
 import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
+import { getErrorAttributes } from './errorUtils';
 import { getTeamFromAGG } from './getTeamFromAGG';
 import { graphqlQuery } from './graphqlUtils';
 const QUERY = `query Team($teamId: String!, $organizationId: String) {
@@ -28,12 +29,6 @@ const buildTeamQuery = (teamId, orgId) => ({
   }
 });
 
-const IGNORED_ERRORS = ['NotPermitted', 'Gone'];
-
-function isRealError(error) {
-  return !IGNORED_ERRORS.includes(error.reason);
-}
-
 export default class TeamProfileCardClient extends CachingClient {
   constructor(options) {
     super(options);
@@ -91,11 +86,10 @@ export default class TeamProfileCardClient extends CachingClient {
 
         resolve(data);
       }).catch(error => {
-        if (analytics && isRealError(error)) {
+        if (analytics) {
           analytics(teamRequestAnalytics('failed', {
             duration: getPageTime() - startTime,
-            errorStatus: error.code,
-            errorReason: error.reason,
+            ...getErrorAttributes(error),
             gateway: shouldUseGateway
           }));
         }