@atlaskit/smart-card 26.2.1 → 26.3.0

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -49,17 +49,21 @@ However src, details, icon, title, and providerName are STRONGLY encouraged
 
 export default (({
   details,
+  enableImprovedPreviewAction,
   ...rest
-}) => ({
-  id: 'preview-content',
-  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
-  promise: props => previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    providerName: 'Preview',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose: () => {},
-    ...props,
-    ...rest
-  })
-}));
+}) => {
+  const previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
+  return {
+    id: 'preview-content',
+    text: /*#__PURE__*/React.createElement(FormattedMessage, previewText),
+    promise: props => previewFunction({
+      popupMountPointId: 'twp-editor-preview-iframe',
+      providerName: 'Preview',
+      showModal: true,
+      iframeName: 'twp-editor-preview-iframe',
+      onClose: () => {},
+      ...props,
+      ...rest
+    })
+  };
+});

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

@@ -22,6 +22,7 @@ import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import { tokens } from '../../utils/token';
 import { css, jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 const flexibleBlockCardElevationStyle = css`
@@ -63,6 +64,7 @@ export const BlockCard = ({
     handleInvoke,
     extensionKey
   };
+  const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     const ui = {
       hideElevation: true
@@ -143,7 +145,7 @@ export const BlockCard = ({
         isSelected: isSelected
       });
     case 'resolved':
-      const resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform);
+      const resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform, enableImprovedPreviewAction);
       if (onResolve) {
         onResolve({
           title: resolvedViewProps.title,

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
@@ -12,7 +13,8 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { CardDisplay } from '../../constants';
 import { fireLinkClickedEvent } from '../../utils/analytics/click';
-export function CardWithUrlContent({
+import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
+function Component({
   id,
   url,
   isSelected,
@@ -255,4 +257,9 @@ export function CardWithUrlContent({
         onIframeFocus: onIframeFocus
       });
   }
-}
+}
+export const CardWithUrlContent = props => getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+  url: props.url,
+  appearance: props.appearance,
+  id: props.id
+}, /*#__PURE__*/React.createElement(Component, props)) : /*#__PURE__*/React.createElement(Component, props);

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -4,6 +4,9 @@ import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
 import { openPreviewModal } from '../../../../../EmbedModal/utils';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../../../messages';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 const PreviewAction = props => {
   const {
     appearance,
@@ -20,6 +23,8 @@ const PreviewAction = props => {
   } = props;
   const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
   const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
+  const previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
     const embedModal = () => openPreviewModal({
       title,
@@ -37,7 +42,8 @@ const PreviewAction = props => {
         if (onClick) {
           onClick();
         }
-      }
+      },
+      content: /*#__PURE__*/React.createElement(FormattedMessage, previewText)
     };
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -46,7 +46,7 @@ const actionMappings = {
       testId: 'smart-action-preview-action',
       content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
       icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
-        label: "Full screen view"
+        label: "Open preview"
       }),
       tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview)
     }

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -14,6 +14,8 @@ import createStatusUpdateRequest from '../../../../../utils/actions/create-statu
 import useResolve from '../../../../../state/hooks/use-resolve';
 import { LozengeActionErrorMessages } from './lozenge-action-error/types';
 import { useFlexibleUiAnalyticsContext } from '../../../../../state/flexible-ui-context';
+import { TrackQuickActionType } from '../../../../../utils/analytics/analytics';
+import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
 const validateItems = (items = [], text) => {
   return items.filter(item => item.text !== text);
 };
@@ -38,11 +40,7 @@ const LozengeAction = ({
   const reload = useResolve();
   //TODO EDM-6583 Replace usage of useFlexibleUiAnalyticsContext with linking platform analytics context from find team.
   const analytics = useFlexibleUiAnalyticsContext();
-  const invoke = useInvoke({
-    started: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted,
-    success: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess,
-    failed: analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed
-  });
+  const invoke = useInvoke();
   useEffect(() => {
     setSelected({
       text,
@@ -58,6 +56,9 @@ const LozengeAction = ({
     setIsOpen(args.isOpen);
     if (args.isOpen) {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionClickedEvent();
+      analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted({
+        smartLinkActionType: TrackQuickActionType.StatusUpdate
+      });
       if (!isLoaded && action !== null && action !== void 0 && action.read) {
         try {
           setIsLoading(true);
@@ -66,12 +67,14 @@ const LozengeAction = ({
           setItems(validItems);
           setIsLoaded(true);
           if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
+            analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(permissionLoadErrorAnalyticsPayload);
             setErrorMessage(LozengeActionErrorMessages.noData);
             setIsLoaded(false);
           }
         } catch (err) {
           setErrorMessage(LozengeActionErrorMessages.unknown);
           setIsLoaded(false);
+          analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(unknownLoadErrorAnalyticsPayload);
         } finally {
           setIsLoading(false);
         }
@@ -102,6 +105,9 @@ const LozengeAction = ({
         setIsLoaded(false);
         setIsOpen(false);
         setItems([]);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess({
+          smartLinkActionType: TrackQuickActionType.StatusUpdate
+        });
         if (url) {
           await reload(url, true, undefined, linkId);
         }
@@ -110,11 +116,13 @@ const LozengeAction = ({
       setIsLoading(false);
       if (isInvokeCustomError(err)) {
         setErrorMessage(err.message);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(validationUpdateErrorAnalyticsPayload);
       } else {
         setErrorMessage(LozengeActionErrorMessages.updateFailed);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed(unknownUpdateErrorAnalyticsPayload);
       }
     }
-  }, [action === null || action === void 0 ? void 0 : action.update, analytics === null || analytics === void 0 ? void 0 : analytics.ui, invoke, linkId, reload, url]);
+  }, [action === null || action === void 0 ? void 0 : action.update, analytics, invoke, linkId, reload, url]);
   const dropdownItemGroup = useMemo(() => {
     if (errorMessage) {
       return jsx(LozengeActionError, {

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-analytics.js

@@ -0,0 +1,21 @@
+import { TrackQuickActionFailureReason, TrackQuickActionType } from '../../../../../utils/analytics/analytics';
+export const unknownLoadErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.UnknownError,
+  step: 'load'
+};
+export const permissionLoadErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.PermissionError,
+  step: 'load'
+};
+export const unknownUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.UnknownError,
+  step: 'update'
+};
+export const validationUpdateErrorAnalyticsPayload = {
+  smartLinkActionType: TrackQuickActionType.StatusUpdate,
+  reason: TrackQuickActionFailureReason.ValidationError,
+  step: 'update'
+};

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -36,6 +36,7 @@ export const contentStyles = css`
 export const linkStyles = css`
   ${sharedBlockStyles};
 
+  cursor: pointer;
   font-size: 0.875rem;
   margin-top: 10px;
   margin-left: ${"var(--ds-space-400, 32px)"};

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -9,9 +10,11 @@ import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
+import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 export const HoverCardComponent = ({
   children,
   url,
+  id,
   analyticsHandler,
   analytics,
   canOpen = true,
@@ -112,7 +115,23 @@ export const HoverCardComponent = ({
   }, [closeOnChildClick, hideCard]);
   const content = useCallback(({
     update
-  }) => jsx(HoverCardContent, {
+  }) => getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
+    url: url,
+    appearance: CardDisplay.HoverCardPreview,
+    id: id
+  }, jsx(HoverCardContent, {
+    onMouseEnter: initShowCard,
+    onMouseLeave: initHideCard,
+    analytics: analytics,
+    cardActions: filteredActions,
+    cardState: linkState,
+    onActionClick: onActionClick,
+    onResolve: update,
+    renderers: renderers,
+    showServerActions: showServerActions,
+    url: url,
+    id: id
+  })) : jsx(HoverCardContent, {
     onMouseEnter: initShowCard,
     onMouseLeave: initHideCard,
     analytics: analytics,
@@ -123,7 +142,7 @@ export const HoverCardComponent = ({
     renderers: renderers,
     showServerActions: showServerActions,
     url: url
-  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
+  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {

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

@@ -8,17 +8,41 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, toActionableMetadata } from '../../../utils';
 import SnippetOrPreview from '../../SnippetOrPreview';
 import { extractMetadata } from '../../../../../extractors/hover/extractMetadata';
-export const toFooterActions = (cardActions, onActionClick) => cardActions.map(action => ({
-  content: action.text,
-  name: ActionName.CustomAction,
-  onClick: () => {
-    if (onActionClick) {
-      onActionClick(action.id);
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+export const toFooterActions = (cardActions, onActionClick, enableImprovedPreviewAction) => {
+  const appearance = enableImprovedPreviewAction ? {
+    appearance: 'primary'
+  } : undefined;
+  const previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
+  return cardActions.map(action => {
+    if (action.id === 'preview-content') {
+      return {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, previewText),
+        name: ActionName.CustomAction,
+        onClick: () => {
+          if (onActionClick) {
+            onActionClick(action.id);
+          }
+          return action.invoke();
+        },
+        testId: action.id,
+        ...appearance
+      };
     }
-    return action.invoke();
-  },
-  testId: action.id
-}));
+    return {
+      content: action.text,
+      name: ActionName.CustomAction,
+      onClick: () => {
+        if (onActionClick) {
+          onActionClick(action.id);
+        }
+        return action.invoke();
+      },
+      testId: action.id
+    };
+  });
+};
 const HoverCardResolvedView = ({
   flexibleCardProps,
   titleBlockProps,
@@ -32,6 +56,7 @@ const HoverCardResolvedView = ({
 }) => {
   var _cardState$details;
   const showActionableElement = useFeatureFlag('enableActionableElement');
+  const enableImprovedPreviewAction = useFeatureFlag('enableImprovedPreviewAction');
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
@@ -40,7 +65,7 @@ const HoverCardResolvedView = ({
       status: cardState.status
     });
   }, [analytics.ui, cardState.status]);
-  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
+  const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick, Boolean(enableImprovedPreviewAction)), [cardActions, onActionClick, enableImprovedPreviewAction]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const {
     primary,

package/dist/esm/extractors/block/index.js

@@ -28,7 +28,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
     return !!detail;
   });
 };
-export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
+export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta, enableImprovedPreviewAction) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
     var actions = extractActions(jsonLd, handleInvoke);
@@ -36,7 +36,8 @@ export var extractBlockActions = function extractBlockActions(props, jsonLd, opt
       viewProps: props,
       jsonLd: jsonLd,
       platform: platform,
-      meta: meta
+      meta: meta,
+      enableImprovedPreviewAction: enableImprovedPreviewAction
     }));
 
     // The previewAction should always be the last action
@@ -67,7 +68,7 @@ export var extractBlockUsers = function extractBlockUsers(jsonLd) {
     return updatedByMembers || createdByMembers;
   }
 };
-export var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers, platform) {
+export var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers, platform, enableImprovedPreviewAction) {
   var props = {
     link: extractLink(jsonLd),
     title: extractTitle(jsonLd),
@@ -83,6 +84,6 @@ export var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, re
     isTrusted: extractIsTrusted(meta)
   };
   return _objectSpread(_objectSpread({}, props), {}, {
-    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta, enableImprovedPreviewAction)
   });
 };

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

@@ -57,7 +57,8 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'block' : _ref$source,
     analytics = _ref.analytics,
-    meta = _ref.meta;
+    meta = _ref.meta,
+    enableImprovedPreviewAction = _ref.enableImprovedPreviewAction;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -76,7 +77,8 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
       onViewActionClick: function onViewActionClick() {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
       },
-      isSupportTheming: extractIsSupportTheming(meta)
+      isSupportTheming: extractIsSupportTheming(meta),
+      enableImprovedPreviewAction: enableImprovedPreviewAction
     }));
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/esm/messages.js

@@ -215,6 +215,12 @@ export var messages = defineMessages({
     defaultMessage: 'Owned by {context}',
     description: 'Indicates the person or entity that owns or maintains the resource.'
   },
+  // Move this to preview once FF has been merged
+  preview_improved: {
+    id: 'fabric.linking.preview_improved',
+    defaultMessage: 'Open preview',
+    description: 'Click to view a richer view of your content, without needing to navigate to it.'
+  },
   preview: {
     id: 'fabric.linking.preview',
     defaultMessage: 'Full screen view',

package/dist/esm/state/actions/index.js

@@ -15,13 +15,20 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     connections = _useSmartLinkContext.connections;
   var getState = store.getState,
     dispatch = store.dispatch;
-  var _ref = getState()[url] || {
-      status: SmartLinkStatus.Pending,
-      details: undefined
-    },
-    details = _ref.details,
-    status = _ref.status,
-    metadataStatus = _ref.metadataStatus;
+  var getSmartLinkState = useCallback(function () {
+    var _getState$url;
+    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+        status: SmartLinkStatus.Pending
+      },
+      details = _ref.details,
+      status = _ref.status,
+      metadataStatus = _ref.metadataStatus;
+    return {
+      details: details,
+      status: status,
+      metadataStatus: metadataStatus
+    };
+  }, [getState, url]);
   var setMetadataStatus = useCallback(function (metadataStatus) {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -46,6 +53,8 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     }, _callee);
   })), [id, resolveUrl, url]);
   var register = useCallback(function () {
+    var _getSmartLinkState = getSmartLinkState(),
+      details = _getSmartLinkState.details;
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url: url
@@ -53,8 +62,10 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   var reload = useCallback(function () {
+    var _getSmartLinkState2 = getSmartLinkState(),
+      details = _getSmartLinkState2.details;
     var definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(function (url) {
@@ -63,15 +74,20 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   var loadMetadata = useCallback(function () {
+    var _getSmartLinkState3 = getSmartLinkState(),
+      metadataStatus = _getSmartLinkState3.metadataStatus;
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [metadataStatus, resolve, setMetadataStatus, url]);
+  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
   var authorize = useCallback(function (appearance) {
+    var _getSmartLinkState4 = getSmartLinkState(),
+      details = _getSmartLinkState4.details,
+      status = _getSmartLinkState4.status;
     var definitionId = getDefinitionId(details);
     var extensionKey = getExtensionKey(details);
     var services = getServices(details);
@@ -123,7 +139,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
+  }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
   var invoke = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(opts, appearance) {
       var key, action, source, markName, response;

package/dist/esm/state/hooks/use-invoke/index.js

@@ -4,49 +4,29 @@ import { useCallback } from 'react';
 import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 var useInvoke = function useInvoke() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    failed = _ref.failed,
-    started = _ref.started,
-    success = _ref.success;
   var _useSmartLinkContext = useSmartLinkContext(),
     connections = _useSmartLinkContext.connections;
   var clientExt = useSmartLinkClientExtension(connections.client);
   return useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(req, cb) {
-      var _req$action;
-      var smartLinkActionType, response;
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(req, cb) {
+      var response;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            smartLinkActionType = req === null || req === void 0 ? void 0 : (_req$action = req.action) === null || _req$action === void 0 ? void 0 : _req$action.actionType;
-            _context.prev = 1;
-            started && started({
-              smartLinkActionType: smartLinkActionType
-            });
-            _context.next = 5;
+            _context.next = 2;
             return clientExt.invoke(req);
-          case 5:
+          case 2:
             response = _context.sent;
-            success && success({
-              smartLinkActionType: smartLinkActionType
-            });
             return _context.abrupt("return", cb ? cb(response) : response);
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](1);
-            failed && failed({
-              smartLinkActionType: smartLinkActionType
-            });
-            throw _context.t0;
-          case 14:
+          case 4:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 10]]);
+      }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
-  }(), [clientExt, failed, started, success]);
+  }(), [clientExt]);
 };
 export default useInvoke;

package/dist/esm/state/hooks/use-resolve/index.js

@@ -1,9 +1,11 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import { addMetadataToExperience } from '../../analytics';
 import { getStatus } from '../../helpers';
 import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction } from '@atlaskit/linking-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ERROR_MESSAGE_FATAL, ERROR_MESSAGE_METADATA, ERROR_MESSAGE_OAUTH } from '../../actions/constants';
 import { getUnauthorizedJsonLd } from '../../../utils/jsonld';
 import { SmartLinkStatus } from '../../../constants';
@@ -73,6 +75,20 @@ var useResolve = function useResolve() {
       }
     }
   }, [getState, setMetadataStatus, dispatch]);
+  var handleResolvedLinkSuccess = useCallback(function (resourceUrl, response, isReloading, isMetadataRequest) {
+    //if a link resolves normally, metadata will also always be resolved
+    setMetadataStatus(resourceUrl, 'resolved');
+    // Dispatch Analytics and resolved card action - including unauthorized states.
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response, undefined, undefined, isMetadataRequest));
+    }
+  }, [setMetadataStatus, dispatch]);
   var handleResolvedLinkResponse = useCallback(function (resourceUrl, response) {
     var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var isMetadataRequest = arguments.length > 3 ? arguments[3] : undefined;
@@ -97,20 +113,20 @@ var useResolve = function useResolve() {
       handleResolvedLinkError(resourceUrl, new APIError('error', hostname, ERROR_MESSAGE_METADATA), response, isMetadataRequest);
       return;
     }
-
-    //if a link resolves normally, metadata will also always be resolved
-    setMetadataStatus(resourceUrl, 'resolved');
-    // Dispatch Analytics and resolved card action - including unauthorized states.
-    if (isReloading) {
-      dispatch(cardAction(ACTION_RELOADING, {
-        url: resourceUrl
-      }, response));
+    if (getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context')) {
+      /**
+       * Using unstable_batchedUpdates because this store update happens async and trigers a rerender
+       * more info:
+       * https://github.com/facebook/react/blob/v18.2.0/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L113
+       * https://react-redux.js.org/api/batch
+       */
+      unstable_batchedUpdates(function () {
+        handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
+      });
     } else {
-      dispatch(cardAction(ACTION_RESOLVED, {
-        url: resourceUrl
-      }, response, undefined, undefined, isMetadataRequest));
+      handleResolvedLinkSuccess(resourceUrl, response, isReloading, isMetadataRequest);
     }
-  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
+  }, [handleResolvedLinkError, handleResolvedLinkSuccess, hasAuthFlowSupported]);
   return useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
       var isReloading,