@atlaskit/smart-card 26.24.0 → 26.26.0

package/dist/es2019/utils/mocks.js

@@ -212,13 +212,18 @@ export const mockAnalytics = {
     buttonClickedEvent: () => {},
     modalClosedEvent: () => {},
     renderSuccessEvent: () => {},
-    renderFailedEvent: () => {}
+    renderFailedEvent: () => {},
+    smartLinkServerActionClickedEvent: () => {}
   },
   operational: {
     invokeSucceededEvent: () => {},
     invokeFailedEvent: () => {}
   },
-  track: {},
+  track: {
+    smartLinkQuickActionFailed: () => {},
+    smartLinkQuickActionStarted: () => {},
+    smartLinkQuickActionSuccess: () => {}
+  },
   screen: {
     modalViewedEvent: () => {}
   }

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -30,6 +30,7 @@ const FlexibleErroredView = ({
   const status = cardState.status;
   const actions = useMemo(() => onAuthorize ? [RetryAction(onAuthorize)] : [], [onAuthorize]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
     onClick: onClick,

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

@@ -4,8 +4,7 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
-import uuid from 'uuid';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -32,7 +31,6 @@ const FlexibleResolvedView = ({
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
-  const [analyticsId] = useState(() => id ? id : uuid());
   const {
     titleMetadata,
     topMetadata,
@@ -80,49 +78,13 @@ const FlexibleResolvedView = ({
   }, {
     actions: [{
       name: ActionName.PreviewAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'PreviewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.ViewAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'ViewAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }, {
       name: ActionName.DownloadAction,
-      hideIcon: true,
-      onClick: () => {
-        analytics.ui.actionClickedEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-        analytics.operational.invokeSucceededEvent({
-          id: analyticsId,
-          actionType: 'DownloadAction',
-          display: CardDisplay.Block
-        });
-      }
+      hideIcon: true
     }]
   })));
 };

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

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { downloadUrl as download } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 const DownloadAction = props => {
   const {
     appearance,
@@ -11,11 +14,22 @@ const DownloadAction = props => {
     testId,
     url
   } = props;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (downloadUrl && url) {
     const action = {
       ...props,
       onClick: () => {
-        download(downloadUrl);
+        invoke({
+          actionType: ActionName.DownloadAction,
+          actionFn: async () => download(downloadUrl),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

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

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { useSmartLinkAnalytics } from '../../../../../../state';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
+import { ActionName } from '../../../../../../constants';
 const PreviewAction = props => {
   const {
     appearance,
@@ -20,22 +21,32 @@ const PreviewAction = props => {
     downloadUrl,
     isSupportTheming
   } = props;
-  const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
-  const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (src && url) {
-    const embedModal = () => openEmbedModalWithFlexibleUiIcon({
+    const actionFn = async () => openEmbedModalWithFlexibleUiIcon({
+      download: downloadUrl,
       title,
       providerName,
-      downloadUrl,
       isSupportTheming,
       analytics,
       linkIcon,
-      src
+      src,
+      url
     });
     const action = {
       ...props,
       onClick: () => {
-        embedModal();
+        invoke({
+          actionType: ActionName.PreviewAction,
+          actionFn,
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

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

@@ -1,23 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import useInvoke from '../../../../../../state/hooks/use-invoke';
+import { getInvokeFailureReason } from '../../../../../../state/hooks/use-invoke/utils';
 import useResolve from '../../../../../../state/hooks/use-resolve';
 import createInvokeRequest from '../../../../../../utils/actions/create-invoke-request';
 import Action from '../index';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 const ServerAction = ({
   action,
   onClick,
   ...props
 }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const analytics = useFlexibleUiAnalyticsContext();
   const invoke = useInvoke();
   const reload = useResolve();
   const handleClick = useCallback(async () => {
     if (action) {
+      var _action$action;
+      const smartLinkActionType = (_action$action = action.action) === null || _action$action === void 0 ? void 0 : _action$action.actionType;
       try {
         setIsLoading(true);
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkServerActionClickedEvent({
+          smartLinkActionType
+        });
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionStarted({
+          smartLinkActionType
+        });
         const request = createInvokeRequest(action);
         await invoke(request);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionSuccess({
+          smartLinkActionType
+        });
         if (action.reload && action.reload.url) {
           await reload(action.reload.url, true, undefined, action.reload.id);
         }
@@ -27,9 +41,13 @@ const ServerAction = ({
         }
       } catch (err) {
         setIsLoading(false);
+        analytics === null || analytics === void 0 ? void 0 : analytics.track.smartLinkQuickActionFailed({
+          smartLinkActionType,
+          reason: getInvokeFailureReason(err)
+        });
       }
     }
-  }, [action, invoke, onClick, reload]);
+  }, [action, analytics === null || analytics === void 0 ? void 0 : analytics.track, analytics === null || analytics === void 0 ? void 0 : analytics.ui, invoke, onClick, reload]);
   return /*#__PURE__*/React.createElement(Action, _extends({}, props, {
     isLoading: isLoading,
     onClick: handleClick

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

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { openUrl } from '../../../../../../utils';
+import { ActionName } from '../../../../../../constants';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 const ViewAction = props => {
   const {
     appearance,
@@ -11,11 +14,22 @@ const ViewAction = props => {
     viewUrl,
     url
   } = props;
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
   if (viewUrl && url) {
     const action = {
       ...props,
       onClick: () => {
-        openUrl(viewUrl);
+        invoke({
+          actionType: ActionName.ViewAction,
+          actionFn: async () => openUrl(viewUrl),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
         if (onClick) {
           onClick();
         }

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

@@ -13,13 +13,13 @@ import extractLozengeActionItems from '../../../../../../extractors/action/extra
 import createStatusUpdateRequest from '../../../../../../utils/actions/create-status-update-request';
 import useResolve from '../../../../../../state/hooks/use-resolve';
 import { LozengeActionErrorMessages } from './lozenge-action-error/types';
+import { isInvokeCustomError } from '../../../../../../state/hooks/use-invoke/utils';
 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);
 };
-const isInvokeCustomError = err => err.message !== undefined && err.errorCode !== undefined;
 const LozengeAction = ({
   action,
   appearance,

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

@@ -142,15 +142,8 @@ export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
 };
 export const openEmbedModalWithFlexibleUiIcon = ({
-  analytics,
-  downloadUrl,
   linkIcon,
-  onClose,
-  providerName,
-  src,
-  title,
-  url,
-  isSupportTheming
+  ...props
 }) => {
   const icon = {
     icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
@@ -159,18 +152,11 @@ export const openEmbedModalWithFlexibleUiIcon = ({
     isFlexibleUi: true
   };
   return openEmbedModal({
-    analytics,
-    download: downloadUrl,
+    ...props,
     icon,
     // Flex should not send origin as block card. It should be able to support
     // its internal parent components like hover card, block card and
     // itself as a standalone. To be investigated and fix in EDM-7520.
-    origin: 'smartLinkCard',
-    providerName,
-    onClose,
-    src,
-    title,
-    url,
-    isSupportTheming
+    origin: 'smartLinkCard'
   });
 };

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

@@ -13,6 +13,7 @@ import { getContextByStatus, getRetryOptions } from './utils';
  */
 const FlexibleCard = ({
   analytics,
+  appearance = 'flexible',
   cardState,
   children,
   id,
@@ -28,6 +29,7 @@ const FlexibleCard = ({
   ui,
   url
 }) => {
+  var _details$meta2;
   const {
     status: cardType,
     details
@@ -45,6 +47,14 @@ const FlexibleCard = ({
   const {
     title
   } = context || {};
+  const analyticsContext = useMemo(() => {
+    var _details$meta;
+    return analytics ? {
+      ...analytics,
+      display: appearance,
+      extensionKey: details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.key
+    } : undefined;
+  }, [analytics, appearance, details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key]);
   useEffect(() => {
     switch (status) {
       case SmartLinkStatus.Resolved:
@@ -70,7 +80,7 @@ const FlexibleCard = ({
     }
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
-    value: analytics
+    value: analyticsContext
   }, /*#__PURE__*/React.createElement(FlexibleUiOptionContext.Provider, {
     value: ui
   }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {

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

@@ -111,6 +111,7 @@ const HoverCardContent = ({
     subtitle: subtitle
   };
   const flexibleCardProps = {
+    appearance: CardDisplay.HoverCardPreview,
     cardState: cardState,
     onClick: onClick,
     onResolve: onResolve,

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.24.0",
+  packageVersion: "26.26.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -8,7 +8,7 @@ import { extractCommentCount, extractProgrammingLanguage, extractSubscriberCount
 import { extractLink, extractTitle, extractProvider, extractMembers, extractPersonAssignedTo, extractPersonCreatedBy, extractPersonUpdatedBy, extractImage } from '@atlaskit/link-extractors';
 import { extractByline } from '../common/byline/extractByline';
 import { extractTitlePrefix } from '../common/title-prefix/extractTitlePrefix';
-import { extractActions } from '../common/actions/extractActions';
+import { extractClientActions } from '../common/actions/extractActions';
 import { extractPreviewAction } from '../common/actions/extractPreviewAction';
 import { extractIsTrusted } from '../common/meta/extractIsTrusted';
 var extractBlockIcon = function extractBlockIcon(jsonLd) {
@@ -31,7 +31,7 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
-    var actions = extractActions(jsonLd, handleInvoke);
+    var actions = extractClientActions(jsonLd, handleInvoke);
     var previewAction = extractPreviewAction(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,

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

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -37,27 +36,6 @@ var getClientActionProps = function getClientActionProps(jsonLd, action, handler
     }
   });
 };
-var getServerActionProps = function getServerActionProps(jsonLd, action, handler) {
-  var id = action['@id'] || action['@type'];
-  var data = {
-    type: 'server',
-    key: action.identifier,
-    action: {
-      type: action['@type'],
-      payload: {
-        id: id,
-        context: jsonLd.context
-      }
-    }
-  };
-  return {
-    id: id,
-    text: action.name,
-    promise: function promise() {
-      return handler(data);
-    }
-  };
-};
 export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
   if (!actions) {
@@ -68,17 +46,11 @@ export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   }
   return actions;
 };
-export function extractActions(jsonLd, handler) {
+export function extractClientActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);
-  var serverActions = actions.filter(function (action) {
-    return !isClientAction(action);
-  });
   var clientActionImpls = clientActions.map(function (action) {
     return getClientActionProps(jsonLd, action, handler);
   });
-  var serverActionImpls = serverActions.map(function (action) {
-    return getServerActionProps(jsonLd, action, handler);
-  });
-  return [].concat(_toConsumableArray(clientActionImpls), _toConsumableArray(serverActionImpls));
+  return clientActionImpls;
 }

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

@@ -8,7 +8,7 @@ import { chunkloadFailedEvent as _chunkloadFailedEvent, connectFailedEvent as _c
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
+import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent, uiServerActionClicked } from '../../utils/analytics/analytics';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
 var applyCommonAttributes = function applyCommonAttributes(event, commonAttributes) {
   if (event && event.attributes) {
@@ -247,11 +247,11 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param actionType The type of the action that was clicked, e.g. PreviewAction
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
-       * @param invokeType Whether the action invoked made a call to a server.
+       * @param invokeType @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-2681 Internal documentation for deprecation (no external access)}
        * @returns
        */
       actionClickedEvent: function actionClickedEvent(_ref6) {
-        var experienceId = _ref6.id,
+        var id = _ref6.id,
           actionType = _ref6.actionType,
           display = _ref6.display,
           invokeType = _ref6.invokeType,
@@ -262,14 +262,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationSubproduct = _ref6.destinationSubproduct,
           location = _ref6.location;
         var extensionKey = overrideExtensionKey !== null && overrideExtensionKey !== void 0 ? overrideExtensionKey : extractedExtensionKey;
-        startUfoExperience('smart-link-action-invocation', experienceId, {
-          actionType: actionType,
-          display: display,
-          extensionKey: extensionKey,
-          invokeType: invokeType
-        });
         dispatchAnalytics(applyCommonAttributes(uiActionClickedEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -512,6 +506,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        */
       smartLinkLozengeActionErrorOpenPreviewClickedEvent: function smartLinkLozengeActionErrorOpenPreviewClickedEvent() {
         return dispatchAnalytics(applyCommonAttributes(uiSmartLinkStatusOpenPreviewButtonClicked(), commonAttributes));
+      },
+      smartLinkServerActionClickedEvent: function smartLinkServerActionClickedEvent(props) {
+        return dispatchAnalytics(applyCommonAttributes(uiServerActionClicked(props), commonAttributes));
       }
     };
   }, [dispatchAnalytics, commonAttributes, defaultId, extractedExtensionKey]);
@@ -527,7 +524,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
        */
       invokeSucceededEvent: function invokeSucceededEvent(_ref13) {
-        var experienceId = _ref13.id,
+        var id = _ref13.id,
           actionType = _ref13.actionType,
           display = _ref13.display,
           extensionKey = _ref13.extensionKey,
@@ -536,9 +533,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref13.destinationProduct,
           destinationSubproduct = _ref13.destinationSubproduct,
           location = _ref13.location;
-        succeedUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeSucceededEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
@@ -558,7 +554,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
        * @param reason The reason the invocation failed.
        */
       invokeFailedEvent: function invokeFailedEvent(_ref14) {
-        var experienceId = _ref14.id,
+        var id = _ref14.id,
           actionType = _ref14.actionType,
           display = _ref14.display,
           reason = _ref14.reason,
@@ -568,9 +564,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
           destinationProduct = _ref14.destinationProduct,
           destinationSubproduct = _ref14.destinationSubproduct,
           location = _ref14.location;
-        failUfoExperience('smart-link-action-invocation', experienceId);
         dispatchAnalytics(applyCommonAttributes(_invokeFailedEvent({
-          id: defaultId,
+          id: id !== null && id !== void 0 ? id : defaultId,
           actionType: actionType,
           display: display,
           reason: reason,

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

@@ -0,0 +1,15 @@
+import { TrackQuickActionFailureReason } from '../../../utils/analytics/analytics';
+export var getInvokeFailureReason = function getInvokeFailureReason(err) {
+  if (!isInvokeCustomError(err)) {
+    return TrackQuickActionFailureReason.UnknownError;
+  }
+  switch (err === null || err === void 0 ? void 0 : err.errorCode) {
+    case 403:
+      return TrackQuickActionFailureReason.PermissionError;
+    default:
+      return TrackQuickActionFailureReason.UnknownError;
+  }
+};
+export var isInvokeCustomError = function isInvokeCustomError(err) {
+  return (err === null || err === void 0 ? void 0 : err.message) !== undefined && (err === null || err === void 0 ? void 0 : err.errorCode) !== undefined;
+};

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

@@ -3,6 +3,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
 import uuid from 'uuid';
 import * as measure from '../../../utils/performance';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
+var ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
+
 /**
  * Invoke client action such as preview, download and open link
  */
@@ -19,45 +22,48 @@ var useInvokeClientAction = function useInvokeClientAction(_ref) {
             markName = "".concat(experienceId, "-").concat(actionType);
             measure.mark(markName, 'pending');
             _context.prev = 4;
-            // Begin analytics instrumentation.
-            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
+            // Begin UFO experience
+            startUfoExperience(ACTION_EXPERIENCE_NAME, experienceId, {
               actionType: actionType,
               display: display,
+              extensionKey: extensionKey,
               invokeType: 'client'
             });
 
+            // Begin analytics instrumentation.
+            analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+              actionType: actionType,
+              display: display
+            });
+
             // Invoke action
-            _context.next = 8;
+            _context.next = 9;
             return actionFn();
-          case 8:
+          case 9:
             result = _context.sent;
             measure.mark(markName, 'resolved');
+            succeedUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
             analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
               actionType: actionType,
               display: display
             });
             return _context.abrupt("return", result);
-          case 14:
-            _context.prev = 14;
+          case 16:
+            _context.prev = 16;
             _context.t0 = _context["catch"](4);
             measure.mark(markName, 'errored');
+            failUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
             reason = typeof _context.t0 === 'string' ? _context.t0 : _context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.message;
             analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
-              id: experienceId,
-              extensionKey: extensionKey,
               actionType: actionType,
               display: display,
               reason: reason
             });
-          case 19:
+          case 22:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 14]]);
+      }, _callee, null, [[4, 16]]);
     }));
     return function (_x) {
       return _ref3.apply(this, arguments);