@atlaskit/smart-card 23.7.3 → 23.8.1

package/dist/cjs/view/CardWithUrl/component.js

@@ -33,6 +33,8 @@ var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 
 var _ = require("../..");
 
+var _constants = require("../../constants");
+
 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; }
@@ -95,7 +97,7 @@ function CardWithUrlContent(_ref) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
       id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
+      display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
       status: state.status,
       definitionId: definitionId,
       extensionKey: extensionKey,

package/dist/cjs/view/EmbedCard/index.js

@@ -59,6 +59,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       inheritDimensions = _ref.inheritDimensions;
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
+  var extensionKey = (0, _helpers.getExtensionKey)(details);
 
   switch (status) {
     case 'pending':
@@ -104,7 +105,7 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
           analytics: analytics,
           origin: 'smartLinkEmbed',
           handleInvoke: handleInvoke,
-          extensionKey: (0, _helpers.getExtensionKey)(details)
+          extensionKey: extensionKey
         });
         return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCardResolvedView, (0, _extends2.default)({}, resolvedBlockViewProps, {
           isSelected: isSelected,
@@ -127,7 +128,10 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
         inheritDimensions: inheritDimensions,
-        onClick: handleFrameClick
+        onClick: handleFrameClick,
+        analytics: analytics,
+        extensionKey: extensionKey,
+        testId: testId
       }));
 
     case 'forbidden':

package/dist/cjs/view/EmbedCard/views/UnauthorisedView.js

@@ -2,12 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbedCardUnauthorisedView = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _UnresolvedView = require("./UnresolvedView");
 
@@ -19,22 +21,36 @@ var _ImageIcon = require("../components/ImageIcon");
 
 var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/UnauthorisedViewContent"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
   var _context$image;
 
-  var link = _ref.link,
+  var analytics = _ref.analytics,
+      link = _ref.link,
       context = _ref.context,
       isSelected = _ref.isSelected,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'embed-card-unauthorized-view' : _ref$testId,
       onAuthorise = _ref.onAuthorise,
       inheritDimensions = _ref.inheritDimensions,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      extensionKey = _ref.extensionKey;
 
   var icon = context && context.icon && /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
     src: typeof context.icon === 'string' ? context.icon : undefined
   });
 
+  var handleOnAuthorizeClick = (0, _react.useCallback)(function () {
+    if (onAuthorise) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      onAuthorise();
+    }
+  }, [onAuthorise, analytics.track, extensionKey]);
   return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
     href: link,
     icon: icon,
@@ -55,9 +71,10 @@ var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
       text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
-    onClick: onAuthorise,
+    onClick: handleOnAuthorizeClick,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
+    analytics: analytics,
     providerName: context === null || context === void 0 ? void 0 : context.text,
     testId: testId
   })));

package/dist/cjs/view/EmbedModal/components/analytics/index.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _types = require("../../types");
 
+var _constants = require("../../../../constants");
+
 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; }
@@ -41,7 +43,7 @@ var withAnalytics = function withAnalytics(Component) {
       });
       analytics.ui.renderSuccessEvent({
         status: 'resolved',
-        display: 'preview'
+        display: _constants.CardDisplay.EmbedPreview
       });
 
       if (onOpen) {
@@ -50,7 +52,7 @@ var withAnalytics = function withAnalytics(Component) {
     }, [analytics.screen, analytics.ui, onOpen, origin]);
     var handleOnOpenFailed = (0, _react.useCallback)(function (error, errorInfo) {
       analytics.ui.renderFailedEvent({
-        display: 'preview',
+        display: _constants.CardDisplay.EmbedPreview,
         error: error,
         errorInfo: errorInfo
       });

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hoverCardClassName = exports.HoverCardComponent = void 0;
+exports.HoverCardComponent = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,22 +29,18 @@ var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardC
 
 var _styled = require("../styled");
 
-var _utils = require("../utils");
+var _constants = require("../../../constants");
 
 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; }
 
 /** @jsx jsx */
-var hoverCardClassName = 'smart-links-hover-preview';
-exports.hoverCardClassName = hoverCardClassName;
-
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
       url = _ref.url,
       analyticsHandler = _ref.analyticsHandler,
-      analytics = _ref.analytics,
-      onAuthorize = _ref.onAuthorize;
+      analytics = _ref.analytics;
   var delay = 300;
 
   var _React$useState = _react2.default.useState(false),
@@ -60,6 +56,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var parentSpan = (0, _react2.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
+  var linkStatus = linkState.status;
   var hoverDisplay = 'card';
   var invokeMethod = 'mouse_hover';
   var setMousePosition = (0, _react2.useCallback)(function (event) {
@@ -79,12 +76,13 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       analytics.ui.hoverCardDismissedEvent({
         previewDisplay: 'card',
         hoverTime: hoverTime,
-        previewInvokeMethod: 'mouse_hover'
+        previewInvokeMethod: 'mouse_hover',
+        status: linkStatus
       });
     }
 
     setIsOpen(false);
-  }, [analytics.ui, isOpen]);
+  }, [analytics.ui, isOpen, linkStatus]);
   var initHideCard = (0, _react2.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -107,7 +105,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
         cardOpenTime.current = Date.now();
         analytics.ui.hoverCardViewedEvent({
           previewDisplay: hoverDisplay,
-          previewInvokeMethod: invokeMethod
+          previewInvokeMethod: invokeMethod,
+          status: linkStatus
         });
       } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
 
@@ -122,10 +121,10 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
 
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui]);
+  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
-    appearance: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+    appearance: _constants.CardDisplay.HoverCardPreview,
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
@@ -135,9 +134,6 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
-  var onClick = (0, _react2.useCallback)(function (e) {
-    return e.stopPropagation();
-  }, []);
   return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
@@ -147,23 +143,17 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     autoFocus: false,
     content: function content(_ref2) {
       var update = _ref2.update;
-      return (0, _react.jsx)("div", {
+      return (0, _react.jsx)(_HoverCardContent.default, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
-        onClick: onClick,
-        css: _styled.HoverCardContainer // class name for trello to exclude click events
-        ,
-        className: hoverCardClassName
-      }, (0, _react.jsx)(_HoverCardContent.default, {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
         onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
-        url: url,
-        onAuthorize: onAuthorize
-      }));
+        url: url
+      });
     },
     trigger: function trigger(triggerProps) {
       return (0, _react.jsx)("span", {

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -7,13 +7,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOpenAction = exports.default = void 0;
+exports.hoverCardClassName = exports.getOpenAction = exports.default = void 0;
+
+var _react = require("@emotion/react");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
 var _extractors = require("@atlaskit/linking-common/extractors");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../../constants");
 
@@ -41,10 +43,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+/** @jsx jsx */
+var hoverCardClassName = 'smart-links-hover-preview';
+exports.hoverCardClassName = hoverCardClassName;
+
 var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
   return {
     name: _constants.ActionName.CustomAction,
-    icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+    icon: (0, _react.jsx)(_shortcut.default, {
       label: "open in new tab",
       size: "medium"
     }),
@@ -59,7 +65,7 @@ var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
         previewDisplay: 'card'
       });
     },
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.open_link_in_a_new_tab),
+    tooltipMessage: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.open_link_in_a_new_tab),
     testId: 'hover-card-open-button'
   };
 };
@@ -79,21 +85,22 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url,
-      onAuthorize = _ref.onAuthorize;
-  var extensionKey = (0, _react.useMemo)(function () {
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave;
+  var extensionKey = (0, _react2.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
-  var onClick = (0, _react.useCallback)(function (event) {
+  var onClick = (0, _react2.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
       id: id,
-      display: _utils2.SMART_CARD_ANALYTICS_DISPLAY,
+      display: _constants.CardDisplay.HoverCardPreview,
       status: cardState.status,
       isModifierKeyPressed: isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
     });
   }, [cardState.status, analytics.ui, id]);
-  var titleActions = (0, _react.useMemo)(function () {
+  var titleActions = (0, _react2.useMemo)(function () {
     return [getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
@@ -120,33 +127,53 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url: url,
     children: {}
   };
+  var onClickStopPropagation = (0, _react2.useCallback)(function (e) {
+    return e.stopPropagation();
+  }, []);
+
+  var getCardView = function getCardView(cardState) {
+    if (cardState.metadataStatus === 'pending') {
+      return (0, _react.jsx)(_resolving.default, {
+        flexibleCardProps: flexibleCardProps,
+        titleBlockProps: titleBlockProps
+      });
+    }
+
+    if (cardState.status === 'unauthorized') {
+      return (0, _react.jsx)(_unauthorised.default, {
+        analytics: analytics,
+        extensionKey: extensionKey,
+        id: id,
+        flexibleCardProps: flexibleCardProps,
+        url: url
+      });
+    }
+
+    if (cardState.status === 'resolved') {
+      return (0, _react.jsx)(_resolved.default, {
+        id: id,
+        url: url,
+        extensionKey: extensionKey,
+        analytics: analytics,
+        cardActions: cardActions,
+        cardState: cardState,
+        flexibleCardProps: flexibleCardProps,
+        onActionClick: onActionClick,
+        titleBlockProps: titleBlockProps
+      });
+    }
 
-  if (cardState.metadataStatus === 'pending') {
-    return /*#__PURE__*/_react.default.createElement(_resolving.default, {
-      flexibleCardProps: flexibleCardProps,
-      titleBlockProps: titleBlockProps
-    });
-  }
-
-  if (cardState.status === 'unauthorized') {
-    return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
-      flexibleCardProps: flexibleCardProps,
-      onAuthorize: onAuthorize
-    });
-  } // if metadataStatus is 'errored' simply render using data available (normal path)
-
+    return null;
+  };
 
-  return /*#__PURE__*/_react.default.createElement(_resolved.default, {
-    id: id,
-    url: url,
-    extensionKey: extensionKey,
-    analytics: analytics,
-    cardActions: cardActions,
-    cardState: cardState,
-    flexibleCardProps: flexibleCardProps,
-    onActionClick: onActionClick,
-    titleBlockProps: titleBlockProps
-  });
+  var cardView = getCardView(cardState);
+  return cardView ? (0, _react.jsx)("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClickStopPropagation,
+    className: hoverCardClassName,
+    css: _styled.HoverCardContainer
+  }, cardView) : null;
 };
 
 var _default = HoverCardContent;

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -77,7 +77,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
     analytics.ui.renderSuccessEvent({
-      display: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+      display: _constants.CardDisplay.HoverCardPreview,
       status: cardState.status
     });
   }, [analytics.ui, cardState.status]);

package/dist/cjs/view/HoverCard/components/views/unauthorised/index.js

@@ -33,6 +33,8 @@ var _elements = require("../../../../FlexibleCard/components/elements");
 
 var _constants = require("../../../../../constants");
 
+var _actions = require("../../../../../state/actions");
+
 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; }
@@ -40,24 +42,40 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
   var _cardState$details, _extractProvider;
 
-  var flexibleCardProps = _ref.flexibleCardProps,
+  var analytics = _ref.analytics,
+      extensionKey = _ref.extensionKey,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      flexibleCardProps = _ref.flexibleCardProps,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
-      onAuthorize = _ref.onAuthorize;
+      url = _ref.url;
   var cardState = flexibleCardProps.cardState;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = (0, _extractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+
+  var _useSmartCardActions = (0, _actions.useSmartCardActions)(id, url, analytics),
+      authorize = _useSmartCardActions.authorize;
+
+  var handleAuthorize = (0, _react.useCallback)(function () {
+    if (authorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      authorize(_constants.CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, extensionKey, analytics.track]);
   var actions = (0, _react.useMemo)(function () {
-    return onAuthorize ? [{
+    return [{
       name: _constants.ActionName.CustomAction,
       content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_action, {
         values: {
           context: providerName
         }
       })),
-      onClick: onAuthorize
-    }] : [];
-  }, [onAuthorize, providerName]);
+      onClick: handleAuthorize
+    }];
+  }, [handleAuthorize, providerName]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, (0, _extends2.default)({}, flexibleCardProps, {
     testId: testId
   }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
@@ -71,7 +89,8 @@ var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
     overrideCss: _styled.mainTextStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UnauthorisedViewContent.default, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics
   }))), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
     overrideCss: _styled.connectButtonStyles,
     testId: "".concat(testId, "-button")

package/dist/cjs/view/HoverCard/index.js

@@ -23,7 +23,7 @@ var _analytics2 = require("../../utils/analytics");
 
 var _HoverCardComponent = require("./components/HoverCardComponent");
 
-var _utils = require("./utils");
+var _constants = require("../../constants");
 
 /** @jsx jsx */
 var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
@@ -37,7 +37,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
   var onError = (0, _react2.useCallback)(function (error, info) {
     analytics.ui.renderFailedEvent({
-      display: _utils.SMART_CARD_ANALYTICS_DISPLAY,
+      display: _constants.CardDisplay.HoverCardPreview,
       id: id,
       error: error,
       errorInfo: info
@@ -53,6 +53,9 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
 };
 
 var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
-  source: 'smartLinkPreviewHoverCard'
+  source: 'smartLinkPreviewHoverCard',
+  attributes: {
+    display: _constants.CardDisplay.HoverCardPreview
+  }
 })((0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary));
 exports.HoverCard = HoverCard;

package/dist/cjs/view/HoverCard/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toActionableMetadata = exports.getSimulatedMetadata = exports.SMART_CARD_ANALYTICS_DISPLAY = void 0;
+exports.toActionableMetadata = exports.getSimulatedMetadata = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,9 +15,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
-exports.SMART_CARD_ANALYTICS_DISPLAY = SMART_CARD_ANALYTICS_DISPLAY;
-
 var getSimulatedMetadata = function getSimulatedMetadata() {
   var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -125,7 +125,8 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
       if (showAuthTooltip) {
         return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
           url: url,
-          onAuthorize: this.props.onAuthorise
+          onAuthorize: this.props.onAuthorise,
+          id: this.props.id
         }, inlineCardUnauthenticatedView);
       }
 

package/dist/cjs/view/InlineCard/index.js

@@ -129,7 +129,8 @@ var InlineCard = function InlineCard(_ref) {
         onClick: handleFrameClick,
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
-        showAuthTooltip: showAuthTooltip
+        showAuthTooltip: showAuthTooltip,
+        id: id
       });
 
     case 'forbidden':

package/dist/cjs/view/common/UnauthorisedViewContent.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,7 +11,7 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -17,6 +19,10 @@ var _messages = require("../../messages");
 
 var _constants = require("../../constants");
 
+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; }
+
 /**
  * This component is used in unauthorized views of a smart link.
  * It represents the main text that provides a user with information on how to connect their account
@@ -24,7 +30,11 @@ var _constants = require("../../constants");
 var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
   var providerName = _ref.providerName,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId,
+      analytics = _ref.analytics;
+  var handleLearnMoreClick = (0, _react.useCallback)(function () {
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.learnMoreClickedEvent();
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, providerName ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_unauthorised_account_description, {
     values: {
       context: providerName
@@ -32,7 +42,8 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
   })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
-    "data-testid": "".concat(testId, "-learn-more")
+    "data-testid": "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.learn_more_about_smart_links)));
 };
 

package/dist/es2019/constants.js

@@ -230,4 +230,15 @@ export let MediaPlacement;
 (function (MediaPlacement) {
   MediaPlacement["Left"] = "left";
   MediaPlacement["Right"] = "right";
-})(MediaPlacement || (MediaPlacement = {}));
+})(MediaPlacement || (MediaPlacement = {}));
+
+export let CardDisplay;
+
+(function (CardDisplay) {
+  CardDisplay["Inline"] = "inline";
+  CardDisplay["Block"] = "block";
+  CardDisplay["Embed"] = "embed";
+  CardDisplay["EmbedPreview"] = "embedPreview";
+  CardDisplay["Flexible"] = "flexible";
+  CardDisplay["HoverCardPreview"] = "hoverCardPreview";
+})(CardDisplay || (CardDisplay = {}));

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -1,6 +1,7 @@
 import { extractDownloadUrl } from '../detail';
 import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
+import { CardDisplay } from '../../../constants';
 
 const getMetadataFromJsonLd = (jsonLd, platform) => {
   const download = extractDownloadUrl(jsonLd);
@@ -31,7 +32,7 @@ const getInvokeOpts = (key, action, source) => ({
   // the actions on the preview state are invoked from the
   // preview card. Hence, we have a `source` for distinguishing
   // between the two.
-  source: source || 'preview',
+  source: source || CardDisplay.EmbedPreview,
   action: {
     type: action,
     promise: () => Promise.resolve()