@atlaskit/profilecard 16.5.0 → 16.6.0

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { AnalyticsName } from '../../internal/analytics';
 import filterActions from '../../internal/filterActions';
 import { CardWrapper } from '../../styled/Card';
@@ -19,7 +20,9 @@ export default class ProfileCardResourced extends React.PureComponent {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      isKudosEnabled: false,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(this, "callAnalytics", (id, options = {}) => {
@@ -51,12 +54,24 @@ export default class ProfileCardResourced extends React.PureComponent {
         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));
       });
     });
 
     _defineProperty(this, "filterActions", () => filterActions(this.props.actions, this.state.data));
+
+    _defineProperty(this, "openKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(this, "closeKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: false
+      });
+    });
   }
 
   componentDidMount() {
@@ -89,7 +104,7 @@ export default class ProfileCardResourced extends React.PureComponent {
     this._isMounted = false;
   }
 
-  handleClientSuccess(profileData, reportingLinesData) {
+  handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
     if (!this._isMounted) {
       return;
     }
@@ -98,7 +113,8 @@ export default class ProfileCardResourced extends React.PureComponent {
       isLoading: false,
       hasError: false,
       data: profileData,
-      reportingLinesData
+      reportingLinesData,
+      isKudosEnabled: shouldShowGiveKudos
     });
   }
 
@@ -120,11 +136,15 @@ export default class ProfileCardResourced extends React.PureComponent {
       hasError,
       error,
       data,
-      reportingLinesData
+      reportingLinesData,
+      isKudosEnabled
     } = this.state;
     const {
       analytics,
-      onReportingLinesClick
+      onReportingLinesClick,
+      cloudId,
+      userId,
+      addFlag
     } = this.props;
     const isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
@@ -144,11 +164,31 @@ export default class ProfileCardResourced extends React.PureComponent {
       analytics,
       reportingLines: reportingLinesData,
       onReportingLinesClick: onReportingLinesClick,
-      ...data
+      cloudId,
+      userId,
+      addFlag,
+      ...data,
+      isKudosEnabled,
+      teamCentralBaseUrl: this.props.resourceClient.getTeamCentralBaseUrl(),
+      openKudosDrawer: this.openKudosDrawer
     };
-    return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(ProfileCard, _extends({}, newProps, {
+    return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, isKudosEnabled && /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+      isOpen: this.state.kudosDrawerOpen,
+      recipient: {
+        type: 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.createElement(ProfileCard, _extends({}, newProps, {
       actions: this.filterActions()
-    })));
+    }))));
   }
 
 }

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import filterActions from '../../internal/filterActions';
@@ -74,7 +75,8 @@ class ProfilecardTrigger extends React.PureComponent {
       data: null,
       reportingLinesData: undefined,
       shouldShowGiveKudos: false,
-      teamCentralBaseUrl: undefined
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(this, "clientFetchProfile", () => {
@@ -104,6 +106,19 @@ class ProfilecardTrigger extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "openKudosDrawer", () => {
+      this.hideProfilecard();
+      this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(this, "closeKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     _defineProperty(this, "renderCard", () => {
       const {
         isLoading
@@ -186,7 +201,9 @@ class ProfilecardTrigger extends 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
     };
     const wrapperProps = this.props.trigger === 'hover' ? {
       onMouseEnter: this.showProfilecard,
@@ -203,7 +220,7 @@ class ProfilecardTrigger extends React.PureComponent {
   }
 
   renderWithTrigger() {
-    return /*#__PURE__*/React.createElement(Popup, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
       isOpen: !!this.state.visible,
       onClose: this.hideProfilecard,
       placement: this.props.position,
@@ -220,7 +237,21 @@ class ProfilecardTrigger extends React.PureComponent {
       },
       zIndex: layers.modal(),
       shouldUseCaptureOnOutsideClick: true
-    });
+    }), this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+      isOpen: this.state.kudosDrawerOpen,
+      recipient: {
+        type: 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
+    })));
   }
 
   render() {

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

@@ -57,6 +57,10 @@ export default function getMockProfileClient(BaseProfileClient, modifyResponse)
       });
     }
 
+    getFlagEnabled(featureKey) {
+      return Promise.resolve(true);
+    }
+
   }
 
   return class MockProfileClient extends BaseProfileClient {

package/dist/es2019/styled/Card.js

@@ -24,7 +24,8 @@ export const ActionButtonGroup = styled.div`
   text-align: right;
 
   button,
-  a {
+  a,
+  span {
     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.5.0",
+    packageVersion: "16.6.0",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

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

package/dist/esm/client/ProfileCardClient.js

@@ -58,11 +58,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);
     }
   }]);
 

package/dist/esm/client/TeamCentralCardClient.js

@@ -22,11 +22,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
     }
   };
 };
@@ -59,7 +60,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
   _createClass(TeamCentralCardClient, [{
     key: "makeFeatureFlagCheckRequest",
     value: function () {
-      var _makeFeatureFlagCheckRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(featureKey) {
+      var _makeFeatureFlagCheckRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(featureKey, context) {
         var query, response;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -73,7 +74,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 graphqlQuery(this.options.teamCentralUrl, query);
 
@@ -89,7 +90,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee, this);
       }));
 
-      function makeFeatureFlagCheckRequest(_x) {
+      function makeFeatureFlagCheckRequest(_x, _x2) {
         return _makeFeatureFlagCheckRequest.apply(this, arguments);
       }
 
@@ -128,7 +129,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee2, this);
       }));
 
-      function makeRequest(_x2) {
+      function makeRequest(_x3) {
         return _makeRequest.apply(this, arguments);
       }
 
@@ -182,7 +183,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
     }
   }, {
     key: "getFlagEnabled",
-    value: function getFlagEnabled(featureKey) {
+    value: function getFlagEnabled(featureKey, productIdentifier) {
       var _this3 = this;
 
       if (!featureKey) {
@@ -197,8 +198,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/esm/components/User/ProfileCard.js

@@ -61,14 +61,44 @@ 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));
+    _defineProperty(_assertThisInitialized(_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);
+    });
+
+    _defineProperty(_assertThisInitialized(_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());
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderButton", function (action, idx) {
+      return /*#__PURE__*/React.createElement(Button, {
+        appearance: idx === 0 ? 'default' : 'subtle',
+        key: action.id || idx,
+        onClick: function onClick(event) {
+          _this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+            id: action.id || null,
+            duration: _this.durationSince(_this.timeOpen)
+          });
+
+          if (action.callback && 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 () {
@@ -108,9 +138,9 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
           label: /*#__PURE__*/React.createElement(FormattedMessage, messages.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]);
       }
@@ -128,27 +158,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
 
       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) {
-            _this4.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-              id: action.id || null,
-              duration: _this4.durationSince(_this4.timeOpen)
-            });
-
-            if (action.callback && 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/esm/components/User/ProfileCardResourced.js

@@ -1,4 +1,5 @@
 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";
@@ -15,7 +16,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { AnalyticsName } from '../../internal/analytics';
 import filterActions from '../../internal/filterActions';
 import { CardWrapper } from '../../styled/Card';
@@ -47,7 +49,9 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      isKudosEnabled: false,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "callAnalytics", function (id) {
@@ -75,9 +79,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, _toConsumableArray(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -90,6 +96,18 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       return filterActions(_this.props.actions, _this.state.data);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "openKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     return _this;
   }
 
@@ -125,7 +143,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(profileData, reportingLinesData) {
+    value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -134,7 +152,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         isLoading: false,
         hasError: false,
         data: profileData,
-        reportingLinesData: reportingLinesData
+        reportingLinesData: reportingLinesData,
+        isKudosEnabled: shouldShowGiveKudos
       });
     }
   }, {
@@ -158,10 +177,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) {
@@ -173,18 +196,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.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(ProfileCard, _extends({}, newProps, {
+      return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, isKudosEnabled && /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+        isOpen: this.state.kudosDrawerOpen,
+        recipient: {
+          type: 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.createElement(ProfileCard, _extends({}, newProps, {
         actions: this.filterActions()
-      })));
+      }))));
     }
   }]);
 

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

@@ -19,6 +19,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import _filterActions from '../../internal/filterActions';
@@ -106,7 +107,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       data: null,
       reportingLinesData: undefined,
       shouldShowGiveKudos: false,
-      teamCentralBaseUrl: undefined
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "clientFetchProfile", function () {
@@ -142,6 +144,20 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "openKudosDrawer", function () {
+      _this.hideProfilecard();
+
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
       var isLoading = _this.state.isLoading;
 
@@ -229,7 +245,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' ? {
@@ -250,7 +268,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     value: function renderWithTrigger() {
       var _this3 = this;
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
         isOpen: !!this.state.visible,
         onClose: this.hideProfilecard,
         placement: this.props.position,
@@ -266,7 +284,21 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         },
         zIndex: layers.modal(),
         shouldUseCaptureOnOutsideClick: true
-      });
+      }), this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+        isOpen: this.state.kudosDrawerOpen,
+        recipient: {
+          type: 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/esm/mocks/mock-profile-client.js

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

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