@atlaskit/smart-card 26.2.1 → 26.2.2

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

@@ -16,14 +16,21 @@ export const useSmartCardActions = (id, url, analytics) => {
     getState,
     dispatch
   } = store;
-  const {
-    details,
-    status,
-    metadataStatus
-  } = getState()[url] || {
-    status: SmartLinkStatus.Pending,
-    details: undefined
-  };
+  const getSmartLinkState = useCallback(() => {
+    var _getState$url;
+    const {
+      details,
+      status,
+      metadataStatus
+    } = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+      status: SmartLinkStatus.Pending
+    };
+    return {
+      details,
+      status,
+      metadataStatus
+    };
+  }, [getState, url]);
   const setMetadataStatus = useCallback(metadataStatus => {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url
@@ -31,6 +38,9 @@ export const useSmartCardActions = (id, url, analytics) => {
   }, [dispatch, url]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false, isMetadataRequest = false) => resolveUrl(resourceUrl, isReloading, isMetadataRequest, id), [id, resolveUrl, url]);
   const register = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url
@@ -38,23 +48,33 @@ export const useSmartCardActions = (id, url, analytics) => {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   const reload = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(url => resolve(url, true));
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   const loadMetadata = useCallback(() => {
+    const {
+      metadataStatus
+    } = getSmartLinkState();
     //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]);
   const authorize = useCallback(appearance => {
+    const {
+      details,
+      status
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     const extensionKey = getExtensionKey(details);
     const services = getServices(details);
@@ -106,7 +126,7 @@ export const 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]);
   const invoke = useCallback(async (opts, appearance) => {
     const {
       key,

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

@@ -1,7 +1,9 @@
 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';
@@ -75,6 +77,20 @@ const useResolve = () => {
       }
     }
   }, [getState, setMetadataStatus, dispatch]);
+  const handleResolvedLinkSuccess = useCallback((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]);
   const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false, isMetadataRequest) => {
     const hostname = new URL(resourceUrl).hostname;
     const nextStatus = response ? getStatus(response) : 'fatal';
@@ -97,20 +113,20 @@ const 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(() => {
+        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(async (url, isReloading = false, isMetadataRequest = false, id = '') => {
     const {
       details

package/dist/es2019/utils/analytics/SmartLinkAnalyticsContext.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+import { isFlexibleUiCard } from '../flexible';
+import { CardDisplay } from '../../constants';
+import { useSmartCardState as useSmartLinkState } from '../../state/store';
+export const SmartLinkAnalyticsContext = ({
+  children,
+  url,
+  appearance,
+  id
+}) => {
+  const {
+    details,
+    status
+  } = useSmartLinkState(url);
+  const resolvedAttributes = getResolvedAttributes({
+    url
+  }, details, status);
+  const {
+    urlHash
+  } = getUrlAttributes(url);
+  const isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
+  const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      attributes: {
+        ...resolvedAttributes,
+        urlHash,
+        display,
+        id
+      }
+    }
+  }, children);
+};

package/dist/es2019/version.json

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

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/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;