@atlaskit/smart-card 23.7.3 → 23.8.1

package/dist/es2019/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 const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
@@ -44,7 +44,7 @@ const HoverCardResolvedView = ({
     // 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/es2019/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,12 +9,16 @@ 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';
 
 const HoverCardUnauthorisedView = ({
+  analytics,
+  extensionKey,
+  id = '',
   flexibleCardProps,
   testId = 'hover-card-unauthorised-view',
-  onAuthorize
+  url
 }) => {
   var _cardState$details, _extractProvider;
 
@@ -23,15 +27,26 @@ const HoverCardUnauthorisedView = ({
   } = flexibleCardProps;
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
-  const actions = useMemo(() => onAuthorize ? [{
+  const {
+    authorize
+  } = useSmartCardActions(id, url, analytics);
+  const handleAuthorize = useCallback(() => {
+    if (authorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey
+      });
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, extensionKey, analytics.track]);
+  const actions = useMemo(() => [{
     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 +60,8 @@ const HoverCardUnauthorisedView = ({
     overrideCss: mainTextStyles,
     testId: `${testId}-content`
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
-    providerName: providerName
+    providerName: providerName,
+    analytics: analytics
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,
     testId: `${testId}-button`

package/dist/es2019/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';
 
 const HoverCardWithErrorBoundary = props => {
   const {
@@ -23,7 +23,7 @@ const HoverCardWithErrorBoundary = props => {
   const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   const onError = useCallback((error, info) => {
     analytics.ui.renderFailedEvent({
-      display: SMART_CARD_ANALYTICS_DISPLAY,
+      display: CardDisplay.HoverCardPreview,
       id,
       error,
       errorInfo: info
@@ -39,5 +39,8 @@ const HoverCardWithErrorBoundary = props => {
 };
 
 export const HoverCard = withAnalyticsContext({
-  source: 'smartLinkPreviewHoverCard'
+  source: 'smartLinkPreviewHoverCard',
+  attributes: {
+    display: CardDisplay.HoverCardPreview
+  }
 })(withAnalyticsEvents()(HoverCardWithErrorBoundary));

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

@@ -1,5 +1,4 @@
 import { ElementName } from '../../constants';
-export const SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export const getSimulatedMetadata = (extensionKey = '', types = []) => {
   switch (extensionKey) {
     case 'bitbucket-object-provider':

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

@@ -73,7 +73,8 @@ export class InlineCardUnauthorizedView extends 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/es2019/view/InlineCard/index.js

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

package/dist/es2019/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';
@@ -10,15 +10,22 @@ import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
  */
 const UnauthorisedViewContent = ({
   providerName,
-  testId = 'unauthorised-view-content'
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
-  values: {
-    context: providerName
-  }
-})) : /*#__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": `${testId}-learn-more`
-}, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links)));
+  testId = 'unauthorised-view-content',
+  analytics
+}) => {
+  const handleLearnMoreClick = useCallback(() => {
+    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
+    }
+  })) : /*#__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": `${testId}-learn-more`,
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links)));
+};
 
 export default UnauthorisedViewContent;

package/dist/esm/constants.js

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

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

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { extractDownloadUrl } from '../detail';
 import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
+import { CardDisplay } from '../../../constants';
 
 var getMetadataFromJsonLd = function getMetadataFromJsonLd(jsonLd, platform) {
   var download = extractDownloadUrl(jsonLd);
@@ -40,7 +41,7 @@ var getInvokeOpts = function getInvokeOpts(key, action, source) {
     // the actions on the preview state are invoked from the
     // preview card. Hence, we have a `source` for distinguishing
     // between the two.
-    source: source || 'preview',
+    source: source || CardDisplay.EmbedPreview,
     action: {
       type: action,
       promise: function promise() {

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,