@atlaskit/profilecard 16.4.6 → 16.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/profilecard
 
+## 16.5.0
+
+### Minor Changes
+
+- [`31ca93c69a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31ca93c69a3) - [ux] Adding give kudos button to the profile card
+
+## 16.4.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.4.6
 
 ### Patch Changes

package/dist/cjs/client/ProfileCardClient.js

@@ -60,6 +60,22 @@ var ProfileCardClient = /*#__PURE__*/function () {
         reports: []
       });
     }
+  }, {
+    key: "getTeamCentralBaseUrl",
+    value: function getTeamCentralBaseUrl() {
+      var _this$tcClient3;
+
+      return (_this$tcClient3 = this.tcClient) === null || _this$tcClient3 === void 0 ? void 0 : _this$tcClient3.options.teamCentralBaseUrl;
+    }
+  }, {
+    key: "shouldShowGiveKudos",
+    value: function shouldShowGiveKudos() {
+      var _this$tcClient4, _this$tcClient5;
+
+      // Check if the kudos feature enabled and if the user has TC
+      // if the user does not have TC the tc client will be undefined.
+      return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2')) || Promise.resolve(false);
+    }
   }]);
   return ProfileCardClient;
 }();

package/dist/cjs/client/TeamCentralCardClient.js

@@ -38,6 +38,15 @@ var buildReportingLinesQuery = function buildReportingLinesQuery(aaid) {
   };
 };
 
+var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey) {
+  return {
+    query: "\n    query isFeatureKeyEnabled($featureKey: String!) {\n      isFeatureEnabled(featureKey: $featureKey) {\n        enabled\n      }\n    }\n  ",
+    variables: {
+      featureKey: featureKey
+    }
+  };
+};
+
 var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
   (0, _inherits2.default)(TeamCentralCardClient, _CachingClient);
 
@@ -58,13 +67,14 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
     _this = _super.call(this, options);
     _this.options = options;
     _this.bypassOnFailure = false;
+    _this.featureFlagKeys = new Map();
     return _this;
   }
 
   (0, _createClass2.default)(TeamCentralCardClient, [{
-    key: "makeRequest",
+    key: "makeFeatureFlagCheckRequest",
     value: function () {
-      var _makeRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(userId) {
+      var _makeFeatureFlagCheckRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(featureKey) {
         var query, response;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -78,13 +88,13 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
                 throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
 
               case 2:
-                query = buildReportingLinesQuery(userId);
+                query = buildCheckFeatureFlagQuery(featureKey);
                 _context.next = 5;
                 return (0, _graphqlUtils.graphqlQuery)(this.options.teamCentralUrl, query);
 
               case 5:
                 response = _context.sent;
-                return _context.abrupt("return", response.reportingLines);
+                return _context.abrupt("return", response.isFeatureEnabled.enabled);
 
               case 7:
               case "end":
@@ -94,7 +104,46 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee, this);
       }));
 
-      function makeRequest(_x) {
+      function makeFeatureFlagCheckRequest(_x) {
+        return _makeFeatureFlagCheckRequest.apply(this, arguments);
+      }
+
+      return makeFeatureFlagCheckRequest;
+    }()
+  }, {
+    key: "makeRequest",
+    value: function () {
+      var _makeRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(userId) {
+        var query, response;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (this.options.teamCentralUrl) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
+
+              case 2:
+                query = buildReportingLinesQuery(userId);
+                _context2.next = 5;
+                return (0, _graphqlUtils.graphqlQuery)(this.options.teamCentralUrl, query);
+
+              case 5:
+                response = _context2.sent;
+                return _context2.abrupt("return", response.reportingLines);
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function makeRequest(_x2) {
         return _makeRequest.apply(this, arguments);
       }
 
@@ -146,6 +195,38 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         });
       });
     }
+  }, {
+    key: "getFlagEnabled",
+    value: function getFlagEnabled(featureKey) {
+      var _this3 = this;
+
+      if (!featureKey) {
+        return Promise.reject(new Error('featureKey missing'));
+      }
+
+      if (this.featureFlagKeys.has(featureKey)) {
+        return Promise.resolve(this.featureFlagKeys.get(featureKey));
+      }
+
+      if (this.bypassOnFailure) {
+        return Promise.resolve(false);
+      }
+
+      return new Promise(function (resolve) {
+        _this3.makeFeatureFlagCheckRequest(featureKey).then(function (enabled) {
+          _this3.featureFlagKeys.set(featureKey, enabled);
+
+          resolve(enabled);
+        }).catch(function (error) {
+          if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
+            // Trigger circuit breaker
+            _this3.bypassOnFailure = true;
+          }
+
+          resolve(false);
+        });
+      });
+    }
   }, {
     key: "filterReportingLinesUser",
     value: function filterReportingLinesUser() {

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

@@ -89,6 +89,13 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         _this.props.analytics(id, options);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "giveKudosCallback", function (clickedUserId) {
+      if (clickedUserId) {
+        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(clickedUserId));
+      } else {
+        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual"));
+      }
+    });
     _this.timeOpen = null;
 
     _this.clientFetchProfile = function () {
@@ -116,23 +123,45 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         errorType: this.props.errorType
       });
     }
+  }, {
+    key: "getActions",
+    value: function getActions() {
+      var _this3 = this;
+
+      var actions = this.props.actions || [];
+
+      if (!this.props.isCurrentUser && this.props.isKudosEnabled) {
+        var kudosAction = {
+          label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.giveKudosButton),
+          id: 'give-kudos',
+          callback: function callback() {
+            _this3.giveKudosCallback(_this3.props.userId);
+          },
+          link: this.props.userId ? "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(this.props.userId) : "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual")
+        };
+        return actions.concat([kudosAction]);
+      }
+
+      return actions;
+    }
   }, {
     key: "renderActionsButtons",
     value: function renderActionsButtons() {
-      var _this3 = this;
+      var _this4 = this;
 
       if (this.props.actions && this.props.actions.length === 0) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, null, this.props.actions && this.props.actions.map(function (action, idx) {
+      var actions = this.getActions();
+      return /*#__PURE__*/_react.default.createElement(_Card.ActionButtonGroup, null, actions.map(function (action, idx) {
         return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
           appearance: idx === 0 ? 'default' : 'subtle',
           key: action.id || idx,
           onClick: function onClick(event) {
-            _this3.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
+            _this4.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
               id: action.id || null,
-              duration: _this3.durationSince(_this3.timeOpen)
+              duration: _this4.durationSince(_this4.timeOpen)
             });
 
             if (action.callback && (0, _click.isBasicClick)(event)) {
@@ -152,7 +181,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props2 = this.props,
           meta = _this$props2.meta,
@@ -175,7 +204,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         onReportingLinesClick: this.props.onReportingLinesClick,
         analytics: this.props.analytics,
         getDuration: function getDuration() {
-          return _this4.durationSince(_this4.timeOpen);
+          return _this5.durationSince(_this5.timeOpen);
         }
       }));
     }

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

@@ -13,6 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -123,7 +125,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      shouldShowGiveKudos: false,
+      teamCentralBaseUrl: undefined
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -136,14 +140,20 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
+      _this.setState({
+        teamCentralBaseUrl: _this.props.resourceClient.getTeamCentralBaseUrl()
+      });
+
       _this.setState({
         isLoading: true,
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId)]);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
         requests.then(function (res) {
-          return _this.handleClientSuccess(res[0], res[1]);
+          var _this2;
+
+          return (_this2 = _this).handleClientSuccess.apply(_this2, (0, _toConsumableArray2.default)(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -192,7 +202,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(profileData, reportingLinesData) {
+    value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -201,7 +211,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         isLoading: false,
         hasError: false,
         data: profileData,
-        reportingLinesData: reportingLinesData
+        reportingLinesData: reportingLinesData,
+        shouldShowGiveKudos: shouldShowGiveKudos
       });
     }
   }, {
@@ -225,12 +236,18 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderProfileCard",
     value: function renderProfileCard() {
+      var _this$state$data;
+
       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
       }, this.state.data), {}, {
         reportingLines: this.state.reportingLinesData,
-        onReportingLinesClick: this.props.onReportingLinesClick
+        onReportingLinesClick: this.props.onReportingLinesClick,
+        isKudosEnabled: this.state.shouldShowGiveKudos,
+        teamCentralBaseUrl: this.state.teamCentralBaseUrl
       });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
@@ -249,7 +266,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderWithTrigger",
     value: function renderWithTrigger() {
-      var _this2 = this;
+      var _this3 = this;
 
       return /*#__PURE__*/_react.default.createElement(_popup.default, {
         isOpen: !!this.state.visible,
@@ -259,10 +276,10 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         trigger: function trigger(triggerProps) {
           var ref = triggerProps.ref,
               innerProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
-          return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, _this2.containerListeners, {
+          return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, _this3.containerListeners, {
             ref: ref,
-            "data-testid": _this2.props.testId
-          }), _this2.props.children);
+            "data-testid": _this3.props.testId
+          }), _this3.props.children);
         },
         zIndex: _constants.layers.modal(),
         shouldUseCaptureOnOutsideClick: true

package/dist/cjs/messages.js

@@ -147,6 +147,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'pt.team-profile-card.directReports.heading',
     defaultMessage: 'Direct reports',
     description: "Title for a section on the profile card that show the user's direct reports"
+  },
+  giveKudosButton: {
+    id: 'pt.profile-card.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button on the profile card for a user to give a kudos'
   }
 });
 var _default = messages;

package/dist/cjs/styled/Card.js

@@ -43,7 +43,7 @@ var ActionsFlexSpacer = _styledComponents.default.div(_templateObject4 || (_temp
 
 exports.ActionsFlexSpacer = ActionsFlexSpacer;
 
-var ActionButtonGroup = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
+var ActionButtonGroup = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button,\n  a {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
 
 exports.ActionButtonGroup = ActionButtonGroup;
 

package/dist/cjs/util/analytics.js

@@ -56,7 +56,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.4.6"
+      packageVersion: "16.5.0"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.4.6"
+	"version": "16.5.0"
 }

package/dist/es2019/client/ProfileCardClient.js

@@ -34,6 +34,20 @@ class ProfileCardClient {
     });
   }
 
+  getTeamCentralBaseUrl() {
+    var _this$tcClient3;
+
+    return (_this$tcClient3 = this.tcClient) === null || _this$tcClient3 === void 0 ? void 0 : _this$tcClient3.options.teamCentralBaseUrl;
+  }
+
+  shouldShowGiveKudos() {
+    var _this$tcClient4, _this$tcClient5;
+
+    // Check if the kudos feature enabled and if the user has TC
+    // if the user does not have TC the tc client will be undefined.
+    return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2')) || Promise.resolve(false);
+  }
+
 }
 
 function maybeCreateTeamCentralClient(config, clients) {

package/dist/es2019/client/TeamCentralCardClient.js

@@ -32,6 +32,19 @@ const buildReportingLinesQuery = aaid => ({
   }
 });
 
+const buildCheckFeatureFlagQuery = featureKey => ({
+  query: `
+    query isFeatureKeyEnabled($featureKey: String!) {
+      isFeatureEnabled(featureKey: $featureKey) {
+        enabled
+      }
+    }
+  `,
+  variables: {
+    featureKey
+  }
+});
+
 class TeamCentralCardClient extends CachingClient {
   /**
    * Simple circuit breaker to avoid making unnecessary calls to Team Central on auth failures
@@ -45,6 +58,17 @@ class TeamCentralCardClient extends CachingClient {
     super(options);
     this.options = options;
     this.bypassOnFailure = false;
+    this.featureFlagKeys = new Map();
+  }
+
+  async makeFeatureFlagCheckRequest(featureKey) {
+    if (!this.options.teamCentralUrl) {
+      throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
+    }
+
+    const query = buildCheckFeatureFlagQuery(featureKey);
+    const response = await graphqlQuery(this.options.teamCentralUrl, query);
+    return response.isFeatureEnabled.enabled;
   }
 
   async makeRequest(userId) {
@@ -100,6 +124,34 @@ class TeamCentralCardClient extends CachingClient {
     });
   }
 
+  getFlagEnabled(featureKey) {
+    if (!featureKey) {
+      return Promise.reject(new Error('featureKey missing'));
+    }
+
+    if (this.featureFlagKeys.has(featureKey)) {
+      return Promise.resolve(this.featureFlagKeys.get(featureKey));
+    }
+
+    if (this.bypassOnFailure) {
+      return Promise.resolve(false);
+    }
+
+    return new Promise(resolve => {
+      this.makeFeatureFlagCheckRequest(featureKey).then(enabled => {
+        this.featureFlagKeys.set(featureKey, enabled);
+        resolve(enabled);
+      }).catch(error => {
+        if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
+          // Trigger circuit breaker
+          this.bypassOnFailure = true;
+        }
+
+        resolve(false);
+      });
+    });
+  }
+
   filterReportingLinesUser(users = []) {
     return users.filter(user => user.identifierType === 'ATLASSIAN_ID');
   }

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

@@ -37,6 +37,14 @@ export default class Profilecard extends React.PureComponent {
       }
     });
 
+    _defineProperty(this, "giveKudosCallback", clickedUserId => {
+      if (clickedUserId) {
+        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${clickedUserId}`);
+      } else {
+        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual`);
+      }
+    });
+
     this.timeOpen = null;
 
     this.clientFetchProfile = (...args) => {
@@ -57,12 +65,31 @@ export default class Profilecard extends React.PureComponent {
     });
   }
 
+  getActions() {
+    const actions = this.props.actions || [];
+
+    if (!this.props.isCurrentUser && this.props.isKudosEnabled) {
+      const kudosAction = {
+        label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
+        id: 'give-kudos',
+        callback: () => {
+          this.giveKudosCallback(this.props.userId);
+        },
+        link: this.props.userId ? `${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${this.props.userId}` : `${this.props.teamCentralBaseUrl}/give-kudos?type=individual`
+      };
+      return actions.concat([kudosAction]);
+    }
+
+    return actions;
+  }
+
   renderActionsButtons() {
     if (this.props.actions && this.props.actions.length === 0) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, this.props.actions && this.props.actions.map((action, idx) => /*#__PURE__*/React.createElement(Button, {
+    const actions = this.getActions();
+    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map((action, idx) => /*#__PURE__*/React.createElement(Button, {
       appearance: idx === 0 ? 'default' : 'subtle',
       key: action.id || idx,
       onClick: (event, ...args) => {

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

@@ -72,7 +72,9 @@ class ProfilecardTrigger extends React.PureComponent {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      shouldShowGiveKudos: false,
+      teamCentralBaseUrl: undefined
     });
 
     _defineProperty(this, "clientFetchProfile", () => {
@@ -89,13 +91,16 @@ class ProfilecardTrigger extends React.PureComponent {
         return;
       }
 
+      this.setState({
+        teamCentralBaseUrl: this.props.resourceClient.getTeamCentralBaseUrl()
+      });
       this.setState({
         isLoading: true,
         hasError: false,
         data: null
       }, () => {
-        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId || '', userId), this.props.resourceClient.getReportingLines(userId)]);
-        requests.then(res => this.handleClientSuccess(res[0], res[1]), err => this.handleClientError(err)).catch(err => this.handleClientError(err));
+        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId || '', userId), this.props.resourceClient.getReportingLines(userId), this.props.resourceClient.shouldShowGiveKudos()]);
+        requests.then(res => this.handleClientSuccess(...res), err => this.handleClientError(err)).catch(err => this.handleClientError(err));
       });
     });
 
@@ -139,7 +144,7 @@ class ProfilecardTrigger extends React.PureComponent {
     clearTimeout(this.hideTimer);
   }
 
-  handleClientSuccess(profileData, reportingLinesData) {
+  handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
     if (!this._isMounted) {
       return;
     }
@@ -148,7 +153,8 @@ class ProfilecardTrigger extends React.PureComponent {
       isLoading: false,
       hasError: false,
       data: profileData,
-      reportingLinesData
+      reportingLinesData,
+      shouldShowGiveKudos
     });
   }
 
@@ -169,12 +175,18 @@ class ProfilecardTrigger extends React.PureComponent {
   }
 
   renderProfileCard() {
+    var _this$state$data;
+
     const newProps = {
+      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,
       ...this.state.data,
       reportingLines: this.state.reportingLinesData,
-      onReportingLinesClick: this.props.onReportingLinesClick
+      onReportingLinesClick: this.props.onReportingLinesClick,
+      isKudosEnabled: this.state.shouldShowGiveKudos,
+      teamCentralBaseUrl: this.state.teamCentralBaseUrl
     };
     const wrapperProps = this.props.trigger === 'hover' ? {
       onMouseEnter: this.showProfilecard,

package/dist/es2019/messages.js

@@ -139,6 +139,11 @@ const messages = defineMessages({
     id: 'pt.team-profile-card.directReports.heading',
     defaultMessage: 'Direct reports',
     description: "Title for a section on the profile card that show the user's direct reports"
+  },
+  giveKudosButton: {
+    id: 'pt.profile-card.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button on the profile card for a user to give a kudos'
   }
 });
 export default messages;

package/dist/es2019/styled/Card.js

@@ -23,7 +23,8 @@ export const ActionButtonGroup = styled.div`
   margin: ${2 * gridSize()}px 0 0 0;
   text-align: right;
 
-  button {
+  button,
+  a {
     margin-left: ${gridSize}px;
 
     &:first-child {

package/dist/es2019/util/analytics.js

@@ -35,7 +35,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "16.4.6",
+    packageVersion: "16.5.0",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.4.6"
+	"version": "16.5.0"
 }

package/dist/esm/client/ProfileCardClient.js

@@ -48,6 +48,22 @@ var ProfileCardClient = /*#__PURE__*/function () {
         reports: []
       });
     }
+  }, {
+    key: "getTeamCentralBaseUrl",
+    value: function getTeamCentralBaseUrl() {
+      var _this$tcClient3;
+
+      return (_this$tcClient3 = this.tcClient) === null || _this$tcClient3 === void 0 ? void 0 : _this$tcClient3.options.teamCentralBaseUrl;
+    }
+  }, {
+    key: "shouldShowGiveKudos",
+    value: function shouldShowGiveKudos() {
+      var _this$tcClient4, _this$tcClient5;
+
+      // Check if the kudos feature enabled and if the user has TC
+      // if the user does not have TC the tc client will be undefined.
+      return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2')) || Promise.resolve(false);
+    }
   }]);
 
   return ProfileCardClient;

package/dist/esm/client/TeamCentralCardClient.js

@@ -22,6 +22,15 @@ var buildReportingLinesQuery = function buildReportingLinesQuery(aaid) {
   };
 };
 
+var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey) {
+  return {
+    query: "\n    query isFeatureKeyEnabled($featureKey: String!) {\n      isFeatureEnabled(featureKey: $featureKey) {\n        enabled\n      }\n    }\n  ",
+    variables: {
+      featureKey: featureKey
+    }
+  };
+};
+
 var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
   _inherits(TeamCentralCardClient, _CachingClient);
 
@@ -43,13 +52,14 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
     _this = _super.call(this, options);
     _this.options = options;
     _this.bypassOnFailure = false;
+    _this.featureFlagKeys = new Map();
     return _this;
   }
 
   _createClass(TeamCentralCardClient, [{
-    key: "makeRequest",
+    key: "makeFeatureFlagCheckRequest",
     value: function () {
-      var _makeRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(userId) {
+      var _makeFeatureFlagCheckRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(featureKey) {
         var query, response;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -63,13 +73,13 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
                 throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
 
               case 2:
-                query = buildReportingLinesQuery(userId);
+                query = buildCheckFeatureFlagQuery(featureKey);
                 _context.next = 5;
                 return graphqlQuery(this.options.teamCentralUrl, query);
 
               case 5:
                 response = _context.sent;
-                return _context.abrupt("return", response.reportingLines);
+                return _context.abrupt("return", response.isFeatureEnabled.enabled);
 
               case 7:
               case "end":
@@ -79,7 +89,46 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee, this);
       }));
 
-      function makeRequest(_x) {
+      function makeFeatureFlagCheckRequest(_x) {
+        return _makeFeatureFlagCheckRequest.apply(this, arguments);
+      }
+
+      return makeFeatureFlagCheckRequest;
+    }()
+  }, {
+    key: "makeRequest",
+    value: function () {
+      var _makeRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(userId) {
+        var query, response;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (this.options.teamCentralUrl) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
+
+              case 2:
+                query = buildReportingLinesQuery(userId);
+                _context2.next = 5;
+                return graphqlQuery(this.options.teamCentralUrl, query);
+
+              case 5:
+                response = _context2.sent;
+                return _context2.abrupt("return", response.reportingLines);
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function makeRequest(_x2) {
         return _makeRequest.apply(this, arguments);
       }
 
@@ -131,6 +180,38 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         });
       });
     }
+  }, {
+    key: "getFlagEnabled",
+    value: function getFlagEnabled(featureKey) {
+      var _this3 = this;
+
+      if (!featureKey) {
+        return Promise.reject(new Error('featureKey missing'));
+      }
+
+      if (this.featureFlagKeys.has(featureKey)) {
+        return Promise.resolve(this.featureFlagKeys.get(featureKey));
+      }
+
+      if (this.bypassOnFailure) {
+        return Promise.resolve(false);
+      }
+
+      return new Promise(function (resolve) {
+        _this3.makeFeatureFlagCheckRequest(featureKey).then(function (enabled) {
+          _this3.featureFlagKeys.set(featureKey, enabled);
+
+          resolve(enabled);
+        }).catch(function (error) {
+          if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
+            // Trigger circuit breaker
+            _this3.bypassOnFailure = true;
+          }
+
+          resolve(false);
+        });
+      });
+    }
   }, {
     key: "filterReportingLinesUser",
     value: function filterReportingLinesUser() {

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

@@ -61,6 +61,14 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "giveKudosCallback", function (clickedUserId) {
+      if (clickedUserId) {
+        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(clickedUserId));
+      } else {
+        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual"));
+      }
+    });
+
     _this.timeOpen = null;
 
     _this.clientFetchProfile = function () {
@@ -88,23 +96,45 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         errorType: this.props.errorType
       });
     }
+  }, {
+    key: "getActions",
+    value: function getActions() {
+      var _this3 = this;
+
+      var actions = this.props.actions || [];
+
+      if (!this.props.isCurrentUser && this.props.isKudosEnabled) {
+        var kudosAction = {
+          label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
+          id: 'give-kudos',
+          callback: function callback() {
+            _this3.giveKudosCallback(_this3.props.userId);
+          },
+          link: this.props.userId ? "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(this.props.userId) : "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual")
+        };
+        return actions.concat([kudosAction]);
+      }
+
+      return actions;
+    }
   }, {
     key: "renderActionsButtons",
     value: function renderActionsButtons() {
-      var _this3 = this;
+      var _this4 = this;
 
       if (this.props.actions && this.props.actions.length === 0) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, this.props.actions && this.props.actions.map(function (action, idx) {
+      var actions = this.getActions();
+      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map(function (action, idx) {
         return /*#__PURE__*/React.createElement(Button, {
           appearance: idx === 0 ? 'default' : 'subtle',
           key: action.id || idx,
           onClick: function onClick(event) {
-            _this3.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+            _this4.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
               id: action.id || null,
-              duration: _this3.durationSince(_this3.timeOpen)
+              duration: _this4.durationSince(_this4.timeOpen)
             });
 
             if (action.callback && isBasicClick(event)) {
@@ -124,7 +154,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props2 = this.props,
           meta = _this$props2.meta,
@@ -147,7 +177,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         onReportingLinesClick: this.props.onReportingLinesClick,
         analytics: this.props.analytics,
         getDuration: function getDuration() {
-          return _this4.durationSince(_this4.timeOpen);
+          return _this5.durationSince(_this5.timeOpen);
         }
       }));
     }

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

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -103,7 +104,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      shouldShowGiveKudos: false,
+      teamCentralBaseUrl: undefined
     });
 
     _defineProperty(_assertThisInitialized(_this), "clientFetchProfile", function () {
@@ -117,14 +120,20 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
+      _this.setState({
+        teamCentralBaseUrl: _this.props.resourceClient.getTeamCentralBaseUrl()
+      });
+
       _this.setState({
         isLoading: true,
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId)]);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
         requests.then(function (res) {
-          return _this.handleClientSuccess(res[0], res[1]);
+          var _this2;
+
+          return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -175,7 +184,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(profileData, reportingLinesData) {
+    value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -184,7 +193,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         isLoading: false,
         hasError: false,
         data: profileData,
-        reportingLinesData: reportingLinesData
+        reportingLinesData: reportingLinesData,
+        shouldShowGiveKudos: shouldShowGiveKudos
       });
     }
   }, {
@@ -208,12 +218,18 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderProfileCard",
     value: function renderProfileCard() {
+      var _this$state$data;
+
       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
       }, this.state.data), {}, {
         reportingLines: this.state.reportingLinesData,
-        onReportingLinesClick: this.props.onReportingLinesClick
+        onReportingLinesClick: this.props.onReportingLinesClick,
+        isKudosEnabled: this.state.shouldShowGiveKudos,
+        teamCentralBaseUrl: this.state.teamCentralBaseUrl
       });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
@@ -232,7 +248,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderWithTrigger",
     value: function renderWithTrigger() {
-      var _this2 = this;
+      var _this3 = this;
 
       return /*#__PURE__*/React.createElement(Popup, {
         isOpen: !!this.state.visible,
@@ -243,10 +259,10 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
           var ref = triggerProps.ref,
               innerProps = _objectWithoutProperties(triggerProps, _excluded);
 
-          return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, _this2.containerListeners, {
+          return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, _this3.containerListeners, {
             ref: ref,
-            "data-testid": _this2.props.testId
-          }), _this2.props.children);
+            "data-testid": _this3.props.testId
+          }), _this3.props.children);
         },
         zIndex: layers.modal(),
         shouldUseCaptureOnOutsideClick: true

package/dist/esm/messages.js

@@ -139,6 +139,11 @@ var messages = defineMessages({
     id: 'pt.team-profile-card.directReports.heading',
     defaultMessage: 'Direct reports',
     description: "Title for a section on the profile card that show the user's direct reports"
+  },
+  giveKudosButton: {
+    id: 'pt.profile-card.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button on the profile card for a user to give a kudos'
   }
 });
 export default messages;

package/dist/esm/styled/Card.js

@@ -14,7 +14,7 @@ export var CardContainerEmpty = styled.div(_templateObject || (_templateObject =
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
 export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
-export var ActionButtonGroup = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * gridSize(), gridSize);
+export var ActionButtonGroup = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button,\n  a {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * gridSize(), gridSize);
 export var CardContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
 export var DetailsGroup = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
 export var DisabledInfo = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);

package/dist/esm/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.4.6"
+      packageVersion: "16.5.0"
     }, attributes), {}, {
       firedAt: getPageTime()
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.4.6"
+	"version": "16.5.0"
 }

package/dist/types/client/ProfileCardClient.d.ts

@@ -11,5 +11,7 @@ declare class ProfileCardClient {
     getProfile(cloudId: string, userId: string): Promise<any>;
     getTeamProfile(teamId: string, orgId?: string, analytics?: (event: Record<string, any>) => void): Promise<import("../types").Team>;
     getReportingLines(userId: string): Promise<TeamCentralReportingLinesData>;
+    getTeamCentralBaseUrl(): string | undefined;
+    shouldShowGiveKudos(): Promise<boolean>;
 }
 export default ProfileCardClient;

package/dist/types/client/TeamCentralCardClient.d.ts

@@ -14,9 +14,12 @@ declare class TeamCentralCardClient extends CachingClient<TeamCentralReportingLi
      * catch a pretty specific edge case.
      */
     bypassOnFailure: boolean;
+    featureFlagKeys: Map<string, boolean>;
     constructor(options: TeamCentralCardClientOptions);
+    makeFeatureFlagCheckRequest(featureKey: string): Promise<boolean>;
     makeRequest(userId: string): Promise<TeamCentralReportingLinesData>;
     getReportingLines(userId: string): Promise<TeamCentralReportingLinesData>;
+    getFlagEnabled(featureKey: string): Promise<boolean>;
     private filterReportingLinesUser;
 }
 export default TeamCentralCardClient;

package/dist/types/components/User/ProfileCard.d.ts

@@ -10,6 +10,8 @@ export default class Profilecard extends React.PureComponent<ProfilecardProps> {
     callAnalytics: (id: string, options: any) => void;
     componentDidMount(): void;
     renderErrorMessage(): JSX.Element;
+    giveKudosCallback: (clickedUserId?: string | undefined) => void;
+    getActions(): import("../../types").ProfileCardAction[];
     renderActionsButtons(): JSX.Element | null;
     renderCardDetailsDefault(): JSX.Element;
     renderCardDetailsForDisabledAccount(): JSX.Element;

package/dist/types/components/User/ProfileCardTrigger.d.ts

@@ -28,7 +28,7 @@ declare class ProfilecardTrigger extends React.PureComponent<ProfileCardTriggerP
     componentDidUpdate(prevProps: ProfileCardTriggerProps): void;
     componentWillUnmount(): void;
     clientFetchProfile: () => void;
-    handleClientSuccess(profileData: ProfileCardClientData, reportingLinesData: TeamCentralReportingLinesData): void;
+    handleClientSuccess(profileData: ProfileCardClientData, reportingLinesData: TeamCentralReportingLinesData, shouldShowGiveKudos: boolean): void;
     handleClientError(err: any): void;
     filterActions(): ProfileCardAction[];
     renderProfileCard(): JSX.Element;

package/dist/types/messages.d.ts

@@ -139,5 +139,10 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    giveKudosButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/types/types.d.ts

@@ -118,6 +118,8 @@ export interface ProfileCardTriggerState {
     error?: ProfileCardErrorType;
     data: ProfileCardClientData | null;
     reportingLinesData?: TeamCentralReportingLinesData;
+    shouldShowGiveKudos?: boolean;
+    teamCentralBaseUrl?: string;
 }
 export interface TeamProfileCardTriggerState {
     visible?: boolean;
@@ -256,6 +258,8 @@ export interface ProfilecardProps {
     avatarUrl?: string;
     fullName?: string;
     meta?: string;
+    userId?: string;
+    isCurrentUser?: boolean;
     nickname?: string;
     email?: string;
     location?: string;
@@ -272,6 +276,8 @@ export interface ProfilecardProps {
     reportingLinesProfileUrl?: string;
     /** Click handler when user clicks on manager's and direct reports' user avatar, un-clickable otherwise */
     onReportingLinesClick?: (user: ReportingLinesUser) => void;
+    isKudosEnabled?: boolean;
+    teamCentralBaseUrl?: string;
     disabledAccountMessage?: React.ReactNode;
     hasDisabledAccountLozenge?: boolean;
     customLozenges?: LozengeProps[];
@@ -302,6 +308,8 @@ export interface ProfileClient {
     getProfile: (cloudId: string, userId: string) => Promise<ProfileCardClientData>;
     getTeamProfile: (teamId: string, orgId?: string, fireAnalytics?: (event: Record<string, any>) => void) => Promise<Team>;
     getReportingLines: (userId: string) => Promise<TeamCentralReportingLinesData>;
+    shouldShowGiveKudos: () => Promise<boolean>;
+    getTeamCentralBaseUrl: () => string | undefined;
 }
 export declare type ProfilecardTriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
 export declare type ProfileCardErrorType = {
@@ -312,8 +320,10 @@ export interface ProfileClientOptions {
     gatewayGraphqlUrl?: string;
     cacheSize?: number;
     cacheMaxAge?: number;
-    /** Enables Team Central functionality if enabled */
+    /** Enables Team Central functionality if enabled e.g. /gateway/api/watermelon/graphql*/
     teamCentralUrl?: string;
+    /** URL to the Team Central app e.g. team.atlassian.com */
+    teamCentralBaseUrl?: string;
 }
 export interface ClientOverrides {
     userClient?: UserProfileCardClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "16.4.6",
+  "version": "16.5.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/avatar-group": "^8.3.0",
+    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar-group": "^9.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.0.0",
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "date-fns": "^2.17.0",
     "lodash": "^4.17.21",
@@ -62,10 +62,10 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.5.0",
+    "@atlaskit/dynamic-table": "^14.6.0",
     "@atlaskit/inline-edit": "^12.0.0",
-    "@atlaskit/select": "^15.0.0",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/util-data-test": "^17.3.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",