@atlaskit/profilecard 16.5.0 → 16.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/profilecard
 
+## 16.6.0
+
+### Minor Changes
+
+- [`7c691c8e8a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c691c8e8a9) - [ux] Launch the give kudos flow via a drawer from the profile-card.
+
 ## 16.5.0
 
 ### Minor Changes

package/dist/cjs/client/ProfileCardClient.js

@@ -70,11 +70,11 @@ var ProfileCardClient = /*#__PURE__*/function () {
   }, {
     key: "shouldShowGiveKudos",
     value: function shouldShowGiveKudos() {
-      var _this$tcClient4, _this$tcClient5;
+      var _this$tcClient4, _this$tcClient5, _this$tcClient6;
 
       // 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 ((_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', (_this$tcClient6 = this.tcClient) === null || _this$tcClient6 === void 0 ? void 0 : _this$tcClient6.options.productIdentifier)) || Promise.resolve(false);
     }
   }]);
   return ProfileCardClient;

package/dist/cjs/client/TeamCentralCardClient.js

@@ -38,11 +38,12 @@ var buildReportingLinesQuery = function buildReportingLinesQuery(aaid) {
   };
 };
 
-var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey) {
+var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey, context) {
   return {
-    query: "\n    query isFeatureKeyEnabled($featureKey: String!) {\n      isFeatureEnabled(featureKey: $featureKey) {\n        enabled\n      }\n    }\n  ",
+    query: "\n    query isFeatureKeyEnabled($featureKey: String!, $context: [IsFeatureEnabledContextInput]) {\n      isFeatureEnabled(featureKey: $featureKey, context: $context) {\n        enabled\n      }\n    }\n  ",
     variables: {
-      featureKey: featureKey
+      featureKey: featureKey,
+      context: context
     }
   };
 };
@@ -74,7 +75,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
   (0, _createClass2.default)(TeamCentralCardClient, [{
     key: "makeFeatureFlagCheckRequest",
     value: function () {
-      var _makeFeatureFlagCheckRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(featureKey) {
+      var _makeFeatureFlagCheckRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(featureKey, context) {
         var query, response;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -88,7 +89,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
                 throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
 
               case 2:
-                query = buildCheckFeatureFlagQuery(featureKey);
+                query = buildCheckFeatureFlagQuery(featureKey, context);
                 _context.next = 5;
                 return (0, _graphqlUtils.graphqlQuery)(this.options.teamCentralUrl, query);
 
@@ -104,7 +105,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee, this);
       }));
 
-      function makeFeatureFlagCheckRequest(_x) {
+      function makeFeatureFlagCheckRequest(_x, _x2) {
         return _makeFeatureFlagCheckRequest.apply(this, arguments);
       }
 
@@ -143,7 +144,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee2, this);
       }));
 
-      function makeRequest(_x2) {
+      function makeRequest(_x3) {
         return _makeRequest.apply(this, arguments);
       }
 
@@ -197,7 +198,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
     }
   }, {
     key: "getFlagEnabled",
-    value: function getFlagEnabled(featureKey) {
+    value: function getFlagEnabled(featureKey, productIdentifier) {
       var _this3 = this;
 
       if (!featureKey) {
@@ -212,8 +213,12 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         return Promise.resolve(false);
       }
 
+      var context = [{
+        key: 'productIdentifier',
+        value: productIdentifier || 'unset'
+      }];
       return new Promise(function (resolve) {
-        _this3.makeFeatureFlagCheckRequest(featureKey).then(function (enabled) {
+        _this3.makeFeatureFlagCheckRequest(featureKey, context).then(function (enabled) {
           _this3.featureFlagKeys.set(featureKey, enabled);
 
           resolve(enabled);

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

@@ -89,13 +89,41 @@ 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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "kudosUrl", function () {
+      var recipientId = _this.props.userId && "&recipientId=".concat(_this.props.userId) || '';
+      var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
+      return "".concat(_this.props.teamCentralBaseUrl, "/kudos/give?type=individual").concat(recipientId).concat(cloudId);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "kudosButtonCallback", function () {
+      if (_this.props.openKudosDrawer) {
+        _this.props.openKudosDrawer();
       } else {
-        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual"));
+        window.open(_this.kudosUrl());
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderButton", function (action, idx) {
+      return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+        appearance: idx === 0 ? 'default' : 'subtle',
+        key: action.id || idx,
+        onClick: function onClick(event) {
+          _this.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
+            id: action.id || null,
+            duration: _this.durationSince(_this.timeOpen)
+          });
+
+          if (action.callback && (0, _click.isBasicClick)(event)) {
+            event.preventDefault();
+
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = arguments[_key];
+            }
+
+            action.callback.apply(action, [event].concat(args));
+          }
+        },
+        href: action.link
+      }, action.label);
+    });
     _this.timeOpen = null;
 
     _this.clientFetchProfile = function () {
@@ -135,9 +163,9 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
           label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.giveKudosButton),
           id: 'give-kudos',
           callback: function callback() {
-            _this3.giveKudosCallback(_this3.props.userId);
+            _this3.kudosButtonCallback();
           },
-          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")
+          link: this.kudosUrl()
         };
         return actions.concat([kudosAction]);
       }
@@ -155,27 +183,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
 
       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) {
-            _this4.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
-              id: action.id || null,
-              duration: _this4.durationSince(_this4.timeOpen)
-            });
-
-            if (action.callback && (0, _click.isBasicClick)(event)) {
-              event.preventDefault();
-
-              for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-                args[_key - 1] = arguments[_key];
-              }
-
-              action.callback.apply(action, [event].concat(args));
-            }
-          },
-          href: action.link
-        }, action.label);
+        return _this4.renderButton(action, idx);
       }));
     }
   }, {

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +11,8 @@ exports.default = void 0;
 
 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"));
@@ -23,7 +27,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _giveKudos = require("@atlaskit/give-kudos");
 
 var _analytics = require("../../internal/analytics");
 
@@ -37,6 +43,10 @@ var _ProfileCard = _interopRequireDefault(require("./ProfileCard"));
 
 var _UserLoadingState = _interopRequireDefault(require("./UserLoadingState"));
 
+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; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -67,7 +77,9 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      isKudosEnabled: false,
+      kudosDrawerOpen: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "callAnalytics", function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -93,9 +105,11 @@ 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)]);
+        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) {
@@ -106,6 +120,16 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "filterActions", function () {
       return (0, _filterActions.default)(_this.props.actions, _this.state.data);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
     return _this;
   }
 
@@ -141,7 +165,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(profileData, reportingLinesData) {
+    value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -150,7 +174,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         isLoading: false,
         hasError: false,
         data: profileData,
-        reportingLinesData: reportingLinesData
+        reportingLinesData: reportingLinesData,
+        isKudosEnabled: shouldShowGiveKudos
       });
     }
   }, {
@@ -174,10 +199,14 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           hasError = _this$state.hasError,
           error = _this$state.error,
           data = _this$state.data,
-          reportingLinesData = _this$state.reportingLinesData;
+          reportingLinesData = _this$state.reportingLinesData,
+          isKudosEnabled = _this$state.isKudosEnabled;
       var _this$props3 = this.props,
           analytics = _this$props3.analytics,
-          onReportingLinesClick = _this$props3.onReportingLinesClick;
+          onReportingLinesClick = _this$props3.onReportingLinesClick,
+          cloudId = _this$props3.cloudId,
+          userId = _this$props3.userId,
+          addFlag = _this$props3.addFlag;
       var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
       if (isFetchingOrNotStartToFetchYet) {
@@ -189,18 +218,39 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }));
       }
 
-      var newProps = _objectSpread({
+      var newProps = _objectSpread(_objectSpread({
         hasError: hasError,
         errorType: error,
         clientFetchProfile: this.clientFetchProfile,
         analytics: analytics,
         reportingLines: reportingLinesData,
-        onReportingLinesClick: onReportingLinesClick
-      }, data);
+        onReportingLinesClick: onReportingLinesClick,
+        cloudId: cloudId,
+        userId: userId,
+        addFlag: addFlag
+      }, data), {}, {
+        isKudosEnabled: isKudosEnabled,
+        teamCentralBaseUrl: this.props.resourceClient.getTeamCentralBaseUrl(),
+        openKudosDrawer: this.openKudosDrawer
+      });
 
-      return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_ProfileCard.default, (0, _extends2.default)({}, newProps, {
+      return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isKudosEnabled && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+        fallback: null
+      }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
+        isOpen: this.state.kudosDrawerOpen,
+        recipient: {
+          type: _giveKudos.KudosType.INDIVIDUAL,
+          recipientId: this.props.userId
+        },
+        analytics: this.props.analytics,
+        analyticsSource: "profile-card",
+        teamCentralBaseUrl: newProps.teamCentralBaseUrl,
+        cloudId: this.props.cloudId,
+        addFlag: this.props.addFlag,
+        onClose: this.closeKudosDrawer
+      })), /*#__PURE__*/_react.default.createElement(_ProfileCard.default, (0, _extends2.default)({}, newProps, {
         actions: this.filterActions()
-      })));
+      }))));
     }
   }]);
   return ProfileCardResourced;

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 _giveKudos = require("@atlaskit/give-kudos");
+
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 
 var _constants = require("@atlaskit/theme/constants");
@@ -127,7 +129,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       data: null,
       reportingLinesData: undefined,
       shouldShowGiveKudos: false,
-      teamCentralBaseUrl: undefined
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -161,6 +164,18 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         });
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openKudosDrawer", function () {
+      _this.hideProfilecard();
+
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
       var isLoading = _this.state.isLoading;
 
@@ -247,7 +262,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         reportingLines: this.state.reportingLinesData,
         onReportingLinesClick: this.props.onReportingLinesClick,
         isKudosEnabled: this.state.shouldShowGiveKudos,
-        teamCentralBaseUrl: this.state.teamCentralBaseUrl
+        teamCentralBaseUrl: this.state.teamCentralBaseUrl,
+        cloudId: this.props.cloudId,
+        openKudosDrawer: this.openKudosDrawer
       });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
@@ -268,7 +285,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     value: function renderWithTrigger() {
       var _this3 = this;
 
-      return /*#__PURE__*/_react.default.createElement(_popup.default, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
         isOpen: !!this.state.visible,
         onClose: this.hideProfilecard,
         placement: this.props.position,
@@ -283,7 +300,21 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         },
         zIndex: _constants.layers.modal(),
         shouldUseCaptureOnOutsideClick: true
-      });
+      }), this.state.shouldShowGiveKudos && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+        fallback: null
+      }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
+        isOpen: this.state.kudosDrawerOpen,
+        recipient: {
+          type: _giveKudos.KudosType.INDIVIDUAL,
+          recipientId: this.props.userId
+        },
+        analytics: this.props.analytics,
+        analyticsSource: "profile-card",
+        teamCentralBaseUrl: this.state.teamCentralBaseUrl,
+        cloudId: this.props.cloudId,
+        addFlag: this.props.addFlag,
+        onClose: this.closeKudosDrawer
+      })));
     }
   }, {
     key: "render",

package/dist/cjs/mocks/mock-profile-client.js

@@ -114,6 +114,11 @@ function getMockProfileClient(BaseProfileClient, modifyResponse) {
           }, timeout);
         });
       }
+    }, {
+      key: "getFlagEnabled",
+      value: function getFlagEnabled(featureKey) {
+        return Promise.resolve(true);
+      }
     }]);
     return MockTeamCentralClient;
   }(_TeamCentralCardClient.default);

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  a {\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  span {\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.5.0"
+      packageVersion: "16.6.0"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/version.json

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

package/dist/es2019/client/ProfileCardClient.js

@@ -41,11 +41,11 @@ class ProfileCardClient {
   }
 
   shouldShowGiveKudos() {
-    var _this$tcClient4, _this$tcClient5;
+    var _this$tcClient4, _this$tcClient5, _this$tcClient6;
 
     // 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 ((_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', (_this$tcClient6 = this.tcClient) === null || _this$tcClient6 === void 0 ? void 0 : _this$tcClient6.options.productIdentifier)) || Promise.resolve(false);
   }
 
 }

package/dist/es2019/client/TeamCentralCardClient.js

@@ -32,16 +32,17 @@ const buildReportingLinesQuery = aaid => ({
   }
 });
 
-const buildCheckFeatureFlagQuery = featureKey => ({
+const buildCheckFeatureFlagQuery = (featureKey, context) => ({
   query: `
-    query isFeatureKeyEnabled($featureKey: String!) {
-      isFeatureEnabled(featureKey: $featureKey) {
+    query isFeatureKeyEnabled($featureKey: String!, $context: [IsFeatureEnabledContextInput]) {
+      isFeatureEnabled(featureKey: $featureKey, context: $context) {
         enabled
       }
     }
   `,
   variables: {
-    featureKey
+    featureKey,
+    context
   }
 });
 
@@ -61,12 +62,12 @@ class TeamCentralCardClient extends CachingClient {
     this.featureFlagKeys = new Map();
   }
 
-  async makeFeatureFlagCheckRequest(featureKey) {
+  async makeFeatureFlagCheckRequest(featureKey, context) {
     if (!this.options.teamCentralUrl) {
       throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
     }
 
-    const query = buildCheckFeatureFlagQuery(featureKey);
+    const query = buildCheckFeatureFlagQuery(featureKey, context);
     const response = await graphqlQuery(this.options.teamCentralUrl, query);
     return response.isFeatureEnabled.enabled;
   }
@@ -124,7 +125,7 @@ class TeamCentralCardClient extends CachingClient {
     });
   }
 
-  getFlagEnabled(featureKey) {
+  getFlagEnabled(featureKey, productIdentifier) {
     if (!featureKey) {
       return Promise.reject(new Error('featureKey missing'));
     }
@@ -137,8 +138,12 @@ class TeamCentralCardClient extends CachingClient {
       return Promise.resolve(false);
     }
 
+    const context = [{
+      key: 'productIdentifier',
+      value: productIdentifier || 'unset'
+    }];
     return new Promise(resolve => {
-      this.makeFeatureFlagCheckRequest(featureKey).then(enabled => {
+      this.makeFeatureFlagCheckRequest(featureKey, context).then(enabled => {
         this.featureFlagKeys.set(featureKey, enabled);
         resolve(enabled);
       }).catch(error => {

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

@@ -37,14 +37,39 @@ export default class Profilecard extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "giveKudosCallback", clickedUserId => {
-      if (clickedUserId) {
-        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${clickedUserId}`);
+    _defineProperty(this, "kudosUrl", () => {
+      const recipientId = this.props.userId && `&recipientId=${this.props.userId}` || '';
+      const cloudId = this.props.cloudId && `&cloudId=${this.props.cloudId}` || '';
+      return `${this.props.teamCentralBaseUrl}/kudos/give?type=individual${recipientId}${cloudId}`;
+    });
+
+    _defineProperty(this, "kudosButtonCallback", () => {
+      if (this.props.openKudosDrawer) {
+        this.props.openKudosDrawer();
       } else {
-        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual`);
+        window.open(this.kudosUrl());
       }
     });
 
+    _defineProperty(this, "renderButton", (action, idx) => {
+      return /*#__PURE__*/React.createElement(Button, {
+        appearance: idx === 0 ? 'default' : 'subtle',
+        key: action.id || idx,
+        onClick: (event, ...args) => {
+          this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+            id: action.id || null,
+            duration: this.durationSince(this.timeOpen)
+          });
+
+          if (action.callback && isBasicClick(event)) {
+            event.preventDefault();
+            action.callback(event, ...args);
+          }
+        },
+        href: action.link
+      }, action.label);
+    });
+
     this.timeOpen = null;
 
     this.clientFetchProfile = (...args) => {
@@ -73,9 +98,9 @@ export default class Profilecard extends React.PureComponent {
         label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
         id: 'give-kudos',
         callback: () => {
-          this.giveKudosCallback(this.props.userId);
+          this.kudosButtonCallback();
         },
-        link: this.props.userId ? `${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${this.props.userId}` : `${this.props.teamCentralBaseUrl}/give-kudos?type=individual`
+        link: this.kudosUrl()
       };
       return actions.concat([kudosAction]);
     }
@@ -89,22 +114,7 @@ export default class Profilecard extends React.PureComponent {
     }
 
     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) => {
-        this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-          id: action.id || null,
-          duration: this.durationSince(this.timeOpen)
-        });
-
-        if (action.callback && isBasicClick(event)) {
-          event.preventDefault();
-          action.callback(event, ...args);
-        }
-      },
-      href: action.link
-    }, action.label)));
+    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map((action, idx) => this.renderButton(action, idx)));
   }
 
   renderCardDetailsDefault() {