@atlaskit/smart-card 23.7.3 → 23.8.1

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.1",
 	"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,

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
       });