@atlaskit/smart-card 23.7.3 → 23.8.0

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
-import { connectFailedEvent as _connectFailedEvent, connectSucceededEvent as _connectSucceededEvent, context, instrumentEvent, invokeFailedEvent as _invokeFailedEvent, invokeSucceededEvent as _invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
+import { connectFailedEvent as _connectFailedEvent, connectSucceededEvent as _connectSucceededEvent, context, instrumentEvent, invokeFailedEvent as _invokeFailedEvent, invokeSucceededEvent as _invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
@@ -373,7 +373,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
             resourceType = _ref9.resourceType,
             destinationProduct = _ref9.destinationProduct,
             destinationSubproduct = _ref9.destinationSubproduct,
-            location = _ref9.location;
+            location = _ref9.location,
+            status = _ref9.status;
         return dispatchAnalytics(applyCommonAttributes(uiHoverCardViewedEvent({
           id: id,
           previewDisplay: previewDisplay,
@@ -383,7 +384,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
           destinationProduct: destinationProduct,
           destinationSubproduct: destinationSubproduct,
           location: location,
-          previewInvokeMethod: previewInvokeMethod
+          previewInvokeMethod: previewInvokeMethod,
+          status: status
         }), commonAttributes));
       },
 
@@ -392,7 +394,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @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
        */
@@ -406,7 +408,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
             resourceType = _ref10.resourceType,
             destinationProduct = _ref10.destinationProduct,
             destinationSubproduct = _ref10.destinationSubproduct,
-            location = _ref10.location;
+            location = _ref10.location,
+            status = _ref10.status;
         return dispatchAnalytics(applyCommonAttributes(uiHoverCardDismissedEvent({
           previewDisplay: previewDisplay,
           id: id,
@@ -417,8 +420,18 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
           destinationProduct: destinationProduct,
           destinationSubproduct: destinationSubproduct,
           location: location,
-          previewInvokeMethod: previewInvokeMethod
+          previewInvokeMethod: previewInvokeMethod,
+          status: status
         }), commonAttributes));
+      },
+
+      /**
+       * 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: function learnMoreClickedEvent() {
+        return dispatchAnalytics(applyCommonAttributes(uiLearnMoreLinkClickedEvent(), commonAttributes));
       }
     };
   }, [defaultId, commonAttributes, dispatchAnalytics]);
@@ -596,7 +609,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
   var track = useMemo(function () {
     return {
       /**
-       * 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
@@ -616,6 +629,21 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
           destinationSubproduct: destinationSubproduct,
           location: location
         })), commonAttributes));
+      },
+
+      /**
+       * 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: function appAccountAuthStarted(_ref17) {
+        var extensionKey = _ref17.extensionKey,
+            location = _ref17.location;
+        return dispatchAnalytics(applyCommonAttributes(trackAppAccountAuthStarted(_objectSpread(_objectSpread({}, commonAttributes), {}, {
+          extensionKey: extensionKey,
+          location: location
+        })), commonAttributes));
       }
     };
   }, [commonAttributes, dispatchAnalytics]);
@@ -629,13 +657,13 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @returns
        */
-      authPopupEvent: function authPopupEvent(_ref17) {
-        var extensionKey = _ref17.extensionKey,
-            definitionId = _ref17.definitionId,
-            resourceType = _ref17.resourceType,
-            destinationProduct = _ref17.destinationProduct,
-            destinationSubproduct = _ref17.destinationSubproduct,
-            location = _ref17.location;
+      authPopupEvent: function authPopupEvent(_ref18) {
+        var extensionKey = _ref18.extensionKey,
+            definitionId = _ref18.definitionId,
+            resourceType = _ref18.resourceType,
+            destinationProduct = _ref18.destinationProduct,
+            destinationSubproduct = _ref18.destinationSubproduct,
+            location = _ref18.location;
         return dispatchAnalytics(applyCommonAttributes(screenAuthPopupEvent(_objectSpread(_objectSpread({}, commonAttributes), {}, {
           extensionKey: extensionKey,
           definitionId: definitionId,

package/dist/esm/utils/analytics/analytics.js

@@ -215,29 +215,20 @@ export var trackAppAccountConnected = function trackAppAccountConnected(_ref6) {
     })
   };
 };
-export var uiAuthEvent = function uiAuthEvent(_ref7) {
-  var definitionId = _ref7.definitionId,
-      extensionKey = _ref7.extensionKey,
-      destinationProduct = _ref7.destinationProduct,
-      destinationSubproduct = _ref7.destinationSubproduct,
-      location = _ref7.location,
-      display = _ref7.display;
+export var trackAppAccountAuthStarted = function trackAppAccountAuthStarted(_ref7) {
+  var extensionKey = _ref7.extensionKey,
+      location = _ref7.location;
   return {
-    action: 'clicked',
-    actionSubject: 'button',
-    actionSubjectId: 'connectAccount',
-    eventType: 'ui',
+    action: 'authStarted',
+    actionSubject: 'applicationAccount',
+    eventType: 'track',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
-      definitionId: definitionId,
       extensionKey: extensionKey,
-      destinationProduct: destinationProduct,
-      destinationSubproduct: destinationSubproduct,
-      location: location,
-      display: display
+      location: location
     })
   };
 };
-export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(_ref8) {
+export var uiAuthEvent = function uiAuthEvent(_ref8) {
   var definitionId = _ref8.definitionId,
       extensionKey = _ref8.extensionKey,
       destinationProduct = _ref8.destinationProduct,
@@ -246,8 +237,8 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(_r
       display = _ref8.display;
   return {
     action: 'clicked',
-    actionSubject: 'smartLink',
-    actionSubjectId: 'tryAnotherAccount',
+    actionSubject: 'button',
+    actionSubjectId: 'connectAccount',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       definitionId: definitionId,
@@ -259,209 +250,235 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(_r
     })
   };
 };
-export var uiCardClickedEvent = function uiCardClickedEvent(_ref9) {
-  var id = _ref9.id,
-      display = _ref9.display,
-      status = _ref9.status,
-      definitionId = _ref9.definitionId,
+export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(_ref9) {
+  var definitionId = _ref9.definitionId,
       extensionKey = _ref9.extensionKey,
-      isModifierKeyPressed = _ref9.isModifierKeyPressed,
-      location = _ref9.location,
       destinationProduct = _ref9.destinationProduct,
       destinationSubproduct = _ref9.destinationSubproduct,
-      actionSubjectId = _ref9.actionSubjectId;
+      location = _ref9.location,
+      display = _ref9.display;
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
-    actionSubjectId: actionSubjectId,
+    actionSubjectId: 'tryAnotherAccount',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
-      id: id,
-      status: status,
       definitionId: definitionId,
       extensionKey: extensionKey,
-      display: display,
-      isModifierKeyPressed: isModifierKeyPressed,
-      location: location,
       destinationProduct: destinationProduct,
-      destinationSubproduct: destinationSubproduct
+      destinationSubproduct: destinationSubproduct,
+      location: location,
+      display: display
     })
   };
 };
-export var uiActionClickedEvent = function uiActionClickedEvent(_ref10) {
+export var uiCardClickedEvent = function uiCardClickedEvent(_ref10) {
   var id = _ref10.id,
-      actionType = _ref10.actionType,
-      extensionKey = _ref10.extensionKey,
       display = _ref10.display,
+      status = _ref10.status,
       definitionId = _ref10.definitionId,
+      extensionKey = _ref10.extensionKey,
+      isModifierKeyPressed = _ref10.isModifierKeyPressed,
+      location = _ref10.location,
       destinationProduct = _ref10.destinationProduct,
       destinationSubproduct = _ref10.destinationSubproduct,
-      location = _ref10.location;
+      actionSubjectId = _ref10.actionSubjectId;
   return {
     action: 'clicked',
-    actionSubject: 'button',
-    actionSubjectId: uiActionSubjectIds[actionType],
+    actionSubject: 'smartLink',
+    actionSubjectId: actionSubjectId,
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       id: id,
-      display: display,
-      actionType: actionType,
-      extensionKey: extensionKey,
+      status: status,
       definitionId: definitionId,
+      extensionKey: extensionKey,
+      display: display,
+      isModifierKeyPressed: isModifierKeyPressed,
+      location: location,
       destinationProduct: destinationProduct,
-      destinationSubproduct: destinationSubproduct,
-      location: location
+      destinationSubproduct: destinationSubproduct
     })
   };
 };
-export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref11) {
-  var display = _ref11.display,
+export var uiActionClickedEvent = function uiActionClickedEvent(_ref11) {
+  var id = _ref11.id,
+      actionType = _ref11.actionType,
       extensionKey = _ref11.extensionKey,
+      display = _ref11.display,
       definitionId = _ref11.definitionId,
       destinationProduct = _ref11.destinationProduct,
       destinationSubproduct = _ref11.destinationSubproduct,
       location = _ref11.location;
   return {
-    action: 'closed',
-    actionSubject: 'consentModal',
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: uiActionSubjectIds[actionType],
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      display: display,
+      actionType: actionType,
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
-      location: location,
-      display: display
+      location: location
     })
   };
 };
-export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref12) {
-  var extensionKey = _ref12.extensionKey,
+export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref12) {
+  var display = _ref12.display,
+      extensionKey = _ref12.extensionKey,
       definitionId = _ref12.definitionId,
       destinationProduct = _ref12.destinationProduct,
       destinationSubproduct = _ref12.destinationSubproduct,
       location = _ref12.location;
   return {
+    action: 'closed',
     actionSubject: 'consentModal',
-    eventType: 'screen',
+    eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
-      location: location
+      location: location,
+      display: display
     })
   };
 };
-export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref13) {
-  var display = _ref13.display,
-      status = _ref13.status,
-      extensionKey = _ref13.extensionKey,
+export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref13) {
+  var extensionKey = _ref13.extensionKey,
       definitionId = _ref13.definitionId,
       destinationProduct = _ref13.destinationProduct,
       destinationSubproduct = _ref13.destinationSubproduct,
       location = _ref13.location;
   return {
-    action: 'renderSuccess',
-    actionSubject: 'smartLink',
-    eventType: 'ui',
+    actionSubject: 'consentModal',
+    eventType: 'screen',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
-      status: status,
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
-      location: location,
-      display: display
+      location: location
     })
   };
 };
-export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref14) {
+export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref14) {
   var display = _ref14.display,
-      error = _ref14.error,
-      errorInfo = _ref14.errorInfo,
+      status = _ref14.status,
       extensionKey = _ref14.extensionKey,
       definitionId = _ref14.definitionId,
       destinationProduct = _ref14.destinationProduct,
       destinationSubproduct = _ref14.destinationSubproduct,
       location = _ref14.location;
   return {
+    action: 'renderSuccess',
     actionSubject: 'smartLink',
-    action: 'renderFailed',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
-      error: error,
-      errorInfo: errorInfo,
-      display: display,
+      status: status,
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
-      location: location
+      location: location,
+      display: display
     })
   };
 };
-export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref15) {
-  var id = _ref15.id,
-      previewDisplay = _ref15.previewDisplay,
+export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref15) {
+  var display = _ref15.display,
+      error = _ref15.error,
+      errorInfo = _ref15.errorInfo,
       extensionKey = _ref15.extensionKey,
       definitionId = _ref15.definitionId,
       destinationProduct = _ref15.destinationProduct,
       destinationSubproduct = _ref15.destinationSubproduct,
-      location = _ref15.location,
-      previewInvokeMethod = _ref15.previewInvokeMethod;
+      location = _ref15.location;
   return {
-    action: 'viewed',
-    actionSubject: 'hoverCard',
+    actionSubject: 'smartLink',
+    action: 'renderFailed',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
-      id: id,
-      previewDisplay: previewDisplay,
+      error: error,
+      errorInfo: errorInfo,
+      display: display,
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
-      location: location,
-      previewInvokeMethod: previewInvokeMethod
+      location: location
     })
   };
 };
-export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref16) {
+export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref16) {
   var id = _ref16.id,
       previewDisplay = _ref16.previewDisplay,
-      hoverTime = _ref16.hoverTime,
       extensionKey = _ref16.extensionKey,
       definitionId = _ref16.definitionId,
       destinationProduct = _ref16.destinationProduct,
       destinationSubproduct = _ref16.destinationSubproduct,
       location = _ref16.location,
-      previewInvokeMethod = _ref16.previewInvokeMethod;
+      previewInvokeMethod = _ref16.previewInvokeMethod,
+      status = _ref16.status;
   return {
-    action: 'dismissed',
+    action: 'viewed',
     actionSubject: 'hoverCard',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       id: id,
       previewDisplay: previewDisplay,
-      hoverTime: hoverTime,
       extensionKey: extensionKey,
       definitionId: definitionId,
       destinationProduct: destinationProduct,
       destinationSubproduct: destinationSubproduct,
       location: location,
-      previewInvokeMethod: previewInvokeMethod
+      previewInvokeMethod: previewInvokeMethod,
+      status: status
     })
   };
 };
-export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref17) {
+export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref17) {
   var id = _ref17.id,
       previewDisplay = _ref17.previewDisplay,
+      hoverTime = _ref17.hoverTime,
       extensionKey = _ref17.extensionKey,
       definitionId = _ref17.definitionId,
       destinationProduct = _ref17.destinationProduct,
       destinationSubproduct = _ref17.destinationSubproduct,
       location = _ref17.location,
-      previewInvokeMethod = _ref17.previewInvokeMethod;
+      previewInvokeMethod = _ref17.previewInvokeMethod,
+      status = _ref17.status;
+  return {
+    action: 'dismissed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      previewDisplay: previewDisplay,
+      hoverTime: hoverTime,
+      extensionKey: extensionKey,
+      definitionId: definitionId,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct,
+      location: location,
+      previewInvokeMethod: previewInvokeMethod,
+      status: status
+    })
+  };
+};
+export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref18) {
+  var id = _ref18.id,
+      previewDisplay = _ref18.previewDisplay,
+      extensionKey = _ref18.extensionKey,
+      definitionId = _ref18.definitionId,
+      destinationProduct = _ref18.destinationProduct,
+      destinationSubproduct = _ref18.destinationSubproduct,
+      location = _ref18.location,
+      previewInvokeMethod = _ref18.previewInvokeMethod;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -478,4 +495,13 @@ export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClicked
       previewInvokeMethod: previewInvokeMethod
     })
   };
+};
+export var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent() {
+  return {
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: 'learnMore',
+    eventType: 'ui',
+    attributes: _objectSpread({}, context)
+  };
 };

package/dist/esm/utils/analytics/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
-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 var instrumentEvent = function instrumentEvent(_ref) {
   var id = _ref.id,
       status = _ref.status,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.7.3",
+	"version": "23.8.0",
 	"sideEffects": false
 }

package/dist/esm/view/BlockCard/components/flexible/footer/index.js

@@ -20,7 +20,7 @@ var getActionGroupStyles = function getActionGroupStyles(size) {
 
 var providerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  span:first-child {\n    margin-right: 0.375rem;\n  }\n"])));
 /**
- * This Components is a footer that is used in a Block Card with Flexible UI.
+ * This Component is a footer that is used in a Block Card with Flexible UI.
  * It contains a provider icon if provider is present and an actions list if one is passed.
  * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
  *

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

@@ -51,11 +51,12 @@ export var BlockCard = function BlockCard(_ref) {
       details = cardState.details;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
+  var extensionKey = getExtensionKey(details);
   var extractorOpts = {
     analytics: analytics,
     origin: 'smartLinkCard',
     handleInvoke: handleInvoke,
-    extensionKey: getExtensionKey(details)
+    extensionKey: extensionKey
   };
 
   if (enableFlexibleBlockCard) {
@@ -70,7 +71,8 @@ export var BlockCard = function BlockCard(_ref) {
       onError: onError,
       renderers: renderers,
       ui: ui,
-      analytics: analytics
+      analytics: analytics,
+      extensionKey: extensionKey
     };
 
     switch (status) {

package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -45,7 +45,7 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     message: {
       descriptor: messages.not_found_description
     },
-    testId: testId
+    testId: "".concat(testId, "-message")
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     status: status
   })));

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -91,7 +91,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'preview',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }, {
@@ -101,7 +101,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'view',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }, {
@@ -111,7 +111,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
         analytics.operational.invokeSucceededEvent({
           id: analyticsId,
           actionType: 'download',
-          display: 'block'
+          display: CardDisplay.Block
         });
       }
     }]

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
 import BlockCardFooter from '../../components/flexible/footer';
@@ -24,7 +24,10 @@ var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLit
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   var _cardState$details, _extractProvider;
 
-  var cardState = _ref.cardState,
+  var analytics = _ref.analytics,
+      cardState = _ref.cardState,
+      _ref$extensionKey = _ref.extensionKey,
+      extensionKey = _ref$extensionKey === void 0 ? '' : _ref$extensionKey,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
       onError = _ref.onError,
@@ -34,9 +37,17 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       url = _ref.url;
   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 handleAuthorize = useCallback(function () {
+    if (onAuthorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey: extensionKey
+      });
+      onAuthorize();
+    }
+  }, [onAuthorize, extensionKey, analytics.track]);
   var actions = useMemo(function () {
-    return onAuthorize ? [AuthorizeAction(onAuthorize, providerName)] : [];
-  }, [onAuthorize, providerName]);
+    return onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [];
+  }, [handleAuthorize, onAuthorize, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -52,7 +63,9 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     overrideCss: contentStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics,
+    testId: testId
   }))), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: SmartLinkStatus.Unauthorized,

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

@@ -10,6 +10,7 @@ import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { APIError } from '../..';
+import { CardDisplay } from '../../constants';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
       url = _ref.url,
@@ -68,7 +69,7 @@ export function CardWithUrlContent(_ref) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
       id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
+      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
       status: state.status,
       definitionId: definitionId,
       extensionKey: extensionKey,