@atlaskit/smart-card 23.7.3 → 23.8.0

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

@@ -35,6 +35,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       inheritDimensions = _ref.inheritDimensions;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
+  var extensionKey = getExtensionKey(details);
 
   switch (status) {
     case 'pending':
@@ -80,7 +81,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
           analytics: analytics,
           origin: 'smartLinkEmbed',
           handleInvoke: handleInvoke,
-          extensionKey: getExtensionKey(details)
+          extensionKey: extensionKey
         });
         return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedBlockViewProps, {
           isSelected: isSelected,
@@ -103,7 +104,10 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
         inheritDimensions: inheritDimensions,
-        onClick: handleFrameClick
+        onClick: handleFrameClick,
+        analytics: analytics,
+        extensionKey: extensionKey,
+        testId: testId
       }));
 
     case 'forbidden':

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
 import { UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
@@ -7,17 +7,27 @@ import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 export 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.createElement(ImageIcon, {
     src: typeof context.icon === 'string' ? context.icon : undefined
   });
+  var handleOnAuthorizeClick = useCallback(function () {
+    if (onAuthorise) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      onAuthorise();
+    }
+  }, [onAuthorise, analytics.track, extensionKey]);
   return /*#__PURE__*/React.createElement(ExpandedFrame, {
     href: link,
     icon: icon,
@@ -38,9 +48,10 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
       text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
-    onClick: onAuthorise,
+    onClick: handleOnAuthorizeClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    analytics: analytics,
     providerName: context === null || context === void 0 ? void 0 : context.text,
     testId: testId
   })));

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { EmbedModalSize } from '../../types';
+import { CardDisplay } from '../../../../constants';
 
 var getResizeFrom = function getResizeFrom(size) {
   return size === EmbedModalSize.Small ? EmbedModalSize.Large : EmbedModalSize.Small;
@@ -24,7 +25,7 @@ var withAnalytics = function withAnalytics(Component) {
       });
       analytics.ui.renderSuccessEvent({
         status: 'resolved',
-        display: 'preview'
+        display: CardDisplay.EmbedPreview
       });
 
       if (onOpen) {
@@ -33,7 +34,7 @@ var withAnalytics = function withAnalytics(Component) {
     }, [analytics.screen, analytics.ui, onOpen, origin]);
     var handleOnOpenFailed = useCallback(function (error, errorInfo) {
       analytics.ui.renderFailedEvent({
-        display: 'preview',
+        display: CardDisplay.EmbedPreview,
         error: error,
         errorInfo: errorInfo
       });

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

@@ -10,14 +10,13 @@ import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { HoverCardContainer, CARD_GAP_PX } from '../styled';
-import { SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { CardDisplay } from '../../../constants';
 export var hoverCardClassName = 'smart-links-hover-preview';
 export 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 = React.useState(false),
@@ -33,6 +32,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var parentSpan = useRef(null);
   var renderers = useSmartLinkRenderers();
   var linkState = useLinkState(url);
+  var linkStatus = linkState.status;
   var hoverDisplay = 'card';
   var invokeMethod = 'mouse_hover';
   var setMousePosition = useCallback(function (event) {
@@ -52,12 +52,13 @@ export 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 = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -80,7 +81,8 @@ export 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
 
@@ -95,10 +97,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
 
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui]);
+  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
   var linkActions = useSmartLinkActions({
     url: url,
-    appearance: SMART_CARD_ANALYTICS_DISPLAY,
+    appearance: CardDisplay.HoverCardPreview,
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
@@ -134,8 +136,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
         onActionClick: onActionClick,
         onResolve: update,
         renderers: renderers,
-        url: url,
-        onAuthorize: onAuthorize
+        url: url
       }));
     },
     trigger: function trigger(triggerProps) {

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

@@ -1,12 +1,12 @@
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useMemo } from 'react';
-import { ActionName, SmartLinkPosition, SmartLinkSize } from '../../../constants';
+import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import { flexibleUiOptions, titleBlockCss } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { getSimulatedMetadata } from '../utils';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
@@ -47,8 +47,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onActionClick = _ref.onActionClick,
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
-      url = _ref.url,
-      onAuthorize = _ref.onAuthorize;
+      url = _ref.url;
   var extensionKey = useMemo(function () {
     return getExtensionKey(cardState.details);
   }, [cardState.details]);
@@ -56,7 +55,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
       id: id,
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status,
       isModifierKeyPressed: isModifierKeyPressed,
       actionSubjectId: 'titleGoToLink'
@@ -99,8 +98,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
 
   if (cardState.status === 'unauthorized') {
     return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+      analytics: analytics,
+      extensionKey: extensionKey,
+      id: id,
       flexibleCardProps: flexibleCardProps,
-      onAuthorize: onAuthorize
+      url: url
     });
   } // if metadataStatus is 'errored' simply render using data available (normal path)
 

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

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import { ActionName, SmartLinkSize } from '../../../../../constants';
+import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { useSmartCardActions } from '../../../../../state/actions';
-import { getSimulatedMetadata, toActionableMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../../../utils';
+import { getSimulatedMetadata, toActionableMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
 import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
@@ -49,7 +49,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: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       status: cardState.status
     });
   }, [analytics.ui, cardState.status]);

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import FlexibleCard from '../../../../FlexibleCard';
 import { messages } from '../../../../../messages';
@@ -9,29 +9,46 @@ import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled'
 import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
-import { ActionName } from '../../../../../constants';
+import { ActionName, CardDisplay } from '../../../../../constants';
+import { useSmartCardActions } from '../../../../../state/actions';
 
 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 = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+
+  var _useSmartCardActions = useSmartCardActions(id, url, analytics),
+      authorize = _useSmartCardActions.authorize;
+
+  var handleAuthorize = useCallback(function () {
+    if (authorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, extensionKey, analytics.track]);
   var actions = useMemo(function () {
-    return onAuthorize ? [{
+    return [{
       name: ActionName.CustomAction,
       content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
         values: {
           context: providerName
         }
       })),
-      onClick: onAuthorize
-    }] : [];
-  }, [onAuthorize, providerName]);
+      onClick: handleAuthorize
+    }];
+  }, [handleAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
     testId: testId
   }), /*#__PURE__*/React.createElement(CustomBlock, {
@@ -45,7 +62,8 @@ var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
     overrideCss: mainTextStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: "".concat(testId, "-button")

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

@@ -8,7 +8,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { HoverCardComponent } from './components/HoverCardComponent';
-import { SMART_CARD_ANALYTICS_DISPLAY } from './utils';
+import { CardDisplay } from '../../constants';
 
 var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var url = props.url,
@@ -21,7 +21,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   var onError = useCallback(function (error, info) {
     analytics.ui.renderFailedEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       id: id,
       error: error,
       errorInfo: info
@@ -37,5 +37,8 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
 };
 
 export var HoverCard = withAnalyticsContext({
-  source: 'smartLinkPreviewHoverCard'
+  source: 'smartLinkPreviewHoverCard',
+  attributes: {
+    display: CardDisplay.HoverCardPreview
+  }
 })(withAnalyticsEvents()(HoverCardWithErrorBoundary));

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

@@ -5,7 +5,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) { _defineProperty(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; }
 
 import { ElementName } from '../../constants';
-export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export 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/esm/view/InlineCard/UnauthorisedView/index.js

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

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

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

package/dist/esm/view/common/UnauthorisedViewContent.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../messages';
 import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
@@ -11,7 +11,11 @@ import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../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 = useCallback(function () {
+    analytics === null || analytics === void 0 ? void 0 : analytics.ui.learnMoreClickedEvent();
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
     values: {
       context: providerName
@@ -19,7 +23,8 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
   })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/React.createElement("a", {
     href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
-    "data-testid": "".concat(testId, "-learn-more")
+    "data-testid": "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links)));
 };
 

package/dist/types/constants.d.ts

@@ -195,3 +195,11 @@ export declare enum MediaPlacement {
     Left = "left",
     Right = "right"
 }
+export declare enum CardDisplay {
+    Inline = "inline",
+    Block = "block",
+    Embed = "embed",
+    EmbedPreview = "embedPreview",
+    Flexible = "flexible",
+    HoverCardPreview = "hoverCardPreview"
+}

package/dist/types/state/actions/index.d.ts

@@ -1,12 +1,11 @@
 import { JsonLd } from 'json-ld-types';
-import { CardAppearance } from '../../view/Card';
 import { InvokeServerOpts, InvokeClientOpts } from '../../model/invoke-opts';
 import { AnalyticsFacade } from '../analytics';
 import { CardInnerAppearance } from '../../view/Card/types';
 export declare const useSmartCardActions: (id: string, url: string, analytics: AnalyticsFacade) => {
     register: () => Promise<void>;
     reload: () => void;
-    authorize: (appearance: CardAppearance) => void;
+    authorize: (appearance: CardInnerAppearance) => void;
     invoke: (opts: InvokeClientOpts | InvokeServerOpts, appearance: CardInnerAppearance) => Promise<JsonLd.Response | void>;
     loadMetadata: () => Promise<void> | undefined;
 };

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -110,17 +110,23 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param previewInvokeMethod How the preview was triggered.
          * @returns
          */
-        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiHoverCardViewedEventProps) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: UiHoverCardViewedEventProps) => void;
         /**
          * This fires an event that represents a hover preview being dismissed.
          * @param hoverDisplay Whether the hover preview was displayed as a card or embed.
          * @param hoverTime The duration that the user hovered over a Smart Link before the preview was dismissed.
          * @param definitionId The definitionId of the Smart Link resolver invoked.
-         * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+         * @param extensionKey The extensionKey of the Smart Link resolver invoked.
          * @param previewInvokeMethod How the preview was triggered.
          * @returns
          */
-        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiHoverCardDismissedEventProps) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: UiHoverCardDismissedEventProps) => void;
+        /**
+         * Fires an event that signifies that a "Learn More" link was clicked on an unauthenticated card
+         * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+         * @param location The location where a link is displayed (jiraWebLinks, confluencePages etc)
+         */
+        learnMoreClickedEvent: () => void;
     };
     operational: {
         /**
@@ -168,12 +174,19 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
     };
     track: {
         /**
-         * This fires an event which represents a user starting the Smart Link connect account process.
+         * This fires an event which represents a user connecting their account to view a Smart Link.
          * @param definitionId The definitionId of the Smart Link resolver invoked.
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: TrackAppAccountConnectedProps) => void;
+        /**
+         * This fires an event which represents a user starting the Smart Link connect account process.
+         * @param location a location where the Smart Link auth action was initiated.
+         * @param extensionKey The extensionKey of the Smart Link resolver invoked.
+         * @returns
+         */
+        appAccountAuthStarted: ({ extensionKey, location, }: TrackAppAccountConnectedProps) => void;
     };
     screen: {
         /**

package/dist/types/state/flexible-ui-context/index.d.ts

@@ -26,8 +26,9 @@ export declare const FlexibleUiAnalyticsContext: import("react").Context<{
         }) => void;
         renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderSuccessEventProps) => void;
         renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
-        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
-        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+        learnMoreClickedEvent: () => void;
     };
     operational: {
         invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").InvokeSucceededEventProps) => void;
@@ -38,6 +39,7 @@ export declare const FlexibleUiAnalyticsContext: import("react").Context<{
     };
     track: {
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
+        appAccountAuthStarted: ({ extensionKey, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
     };
     screen: {
         authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
@@ -62,8 +64,9 @@ export declare const useFlexibleUiAnalyticsContext: () => {
         }) => void;
         renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderSuccessEventProps) => void;
         renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
-        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
-        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+        learnMoreClickedEvent: () => void;
     };
     operational: {
         invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").InvokeSucceededEventProps) => void;
@@ -74,6 +77,7 @@ export declare const useFlexibleUiAnalyticsContext: () => {
     };
     track: {
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
+        appAccountAuthStarted: ({ extensionKey, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
     };
     screen: {
         authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -4,7 +4,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
     actions: {
         register: () => Promise<void>;
         reload: () => void;
-        authorize: (appearance: import("@atlaskit/linking-common").CardAppearance) => void;
+        authorize: (appearance: import("../../view/Card/types").CardInnerAppearance) => void;
         invoke: (opts: import("../../model/invoke-opts").InvokeClientOpts | import("../../model/invoke-opts").InvokeServerOpts, appearance: import("../../view/Card/types").CardInnerAppearance) => Promise<void | import("json-ld-types").JsonLd.Response<import("json-ld-types").JsonLd.Data.BaseData>>;
         loadMetadata: () => Promise<void> | undefined;
     };
@@ -25,8 +25,9 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
             }) => void;
             renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderSuccessEventProps) => void;
             renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
-            hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
-            hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+            hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
+            hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+            learnMoreClickedEvent: () => void;
         };
         operational: {
             invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").InvokeSucceededEventProps) => void;
@@ -37,6 +38,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         };
         track: {
             appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
+            appAccountAuthStarted: ({ extensionKey, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
         };
         screen: {
             authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;

package/dist/types/utils/analytics/analytics.d.ts

@@ -19,6 +19,7 @@ export declare const invokeFailedEvent: ({ id, actionType, display, reason, exte
 export declare const connectSucceededEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, }: ConnectSucceededEventProps) => AnalyticsPayload;
 export declare const connectFailedEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, reason, }: ConnectFailedEventProps) => AnalyticsPayload;
 export declare const trackAppAccountConnected: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, }: TrackAppAccountConnectedProps) => AnalyticsPayload;
+export declare const trackAppAccountAuthStarted: ({ extensionKey, location, }: TrackAppAccountConnectedProps) => AnalyticsPayload;
 export declare const uiAuthEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, display, }: UiAuthEventProps) => AnalyticsPayload;
 export declare const uiAuthAlternateAccountEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, display, }: UiAuthAlternateAccountEventProps) => AnalyticsPayload;
 export declare const uiCardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: UiCardClickedEventProps) => AnalyticsPayload;
@@ -27,6 +28,7 @@ export declare const uiClosedAuthEvent: ({ display, extensionKey, definitionId,
 export declare const screenAuthPopupEvent: ({ extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: ScreenAuthPopupEventProps) => AnalyticsPayload;
 export declare const uiRenderSuccessEvent: ({ display, status, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: UiRenderSuccessEventProps) => AnalyticsPayload;
 export declare const uiRenderFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: UiRenderFailedEventProps) => AnalyticsPayload;
-export declare const uiHoverCardViewedEvent: ({ id, previewDisplay, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardViewedEventProps) => AnalyticsPayload;
-export declare const uiHoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardDismissedEventProps) => AnalyticsPayload;
+export declare const uiHoverCardViewedEvent: ({ id, previewDisplay, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, status, }: UiHoverCardViewedEventProps) => AnalyticsPayload;
+export declare const uiHoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, status, }: UiHoverCardDismissedEventProps) => AnalyticsPayload;
 export declare const uiHoverCardOpenLinkClickedEvent: ({ id, previewDisplay, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardOpenLinkClickedEventProps) => AnalyticsPayload;
+export declare const uiLearnMoreLinkClickedEvent: () => AnalyticsPayload;

package/dist/types/utils/analytics/index.d.ts

@@ -1,4 +1,4 @@
 import { AnalyticsPayload } from '../types';
 import { InstrumentEventProps } from './types';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, } from './analytics';
 export declare const instrumentEvent: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: InstrumentEventProps) => AnalyticsPayload | undefined;

package/dist/types/utils/analytics/types.d.ts

@@ -76,11 +76,13 @@ export declare type UiRenderFailedEventProps = CommonEventProps & {
 export declare type UiHoverCardViewedEventProps = CommonEventProps & {
     previewDisplay: PreviewDisplay;
     previewInvokeMethod?: PreviewInvokeMethod;
+    status: CardType;
 };
 export declare type UiHoverCardDismissedEventProps = CommonEventProps & {
     previewDisplay: PreviewDisplay;
     hoverTime: number;
     previewInvokeMethod?: PreviewInvokeMethod;
+    status: CardType;
 };
 export declare type UiHoverCardOpenLinkClickedEventProps = CommonEventProps & {
     previewDisplay: PreviewDisplay;

package/dist/types/utils/mocks.d.ts

@@ -53,8 +53,9 @@ export declare const mockAnalytics: {
         }) => void;
         renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiRenderSuccessEventProps) => void;
         renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiRenderFailedEventProps) => void;
-        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiHoverCardViewedEventProps) => void;
-        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiHoverCardDismissedEventProps) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("./analytics/types").UiHoverCardViewedEventProps) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("./analytics/types").UiHoverCardDismissedEventProps) => void;
+        learnMoreClickedEvent: () => void;
     };
     operational: {
         invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").InvokeSucceededEventProps) => void;
@@ -65,6 +66,7 @@ export declare const mockAnalytics: {
     };
     track: {
         appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").CommonEventProps) => void;
+        appAccountAuthStarted: ({ extensionKey, location, }: import("./analytics/types").CommonEventProps) => void;
     };
     screen: {
         authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").CommonEventProps) => void;