@atlaskit/smart-card 32.7.2 → 32.7.4

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

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { handleClickCommon } from '../common/utils';
 import { CardLinkView } from '../LinkView';
-import { handleClickCommon } from './utils/handlers';
-import FlexibleErroredView from './views/flexible/FlexibleErroredView';
-import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
-import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
-import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
-import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
+import ErroredView from './views/ErroredView';
+import ForbiddenView from './views/ForbiddenView';
+import NotFoundView from './views/NotFoundView';
+import ResolvedView from './views/ResolvedView';
+import UnauthorisedView from './views/UnauthorisedView';
 export const BlockCard = ({
   id,
   url,
@@ -25,7 +25,7 @@ export const BlockCard = ({
   const {
     status
   } = cardState;
-  const flexibleBlockCardProps = {
+  const blockCardProps = {
     id,
     cardState,
     url,
@@ -40,21 +40,21 @@ export const BlockCard = ({
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(FlexibleResolvedView, _extends({}, flexibleBlockCardProps, {
+      return /*#__PURE__*/React.createElement(ResolvedView, _extends({}, blockCardProps, {
         testId: 'smart-block-resolving-view'
       }));
     case 'resolved':
-      return /*#__PURE__*/React.createElement(FlexibleResolvedView, flexibleBlockCardProps);
+      return /*#__PURE__*/React.createElement(ResolvedView, blockCardProps);
     case 'unauthorized':
-      return /*#__PURE__*/React.createElement(FlexibleUnauthorisedView, _extends({}, flexibleBlockCardProps, {
+      return /*#__PURE__*/React.createElement(UnauthorisedView, _extends({}, blockCardProps, {
         onAuthorize: handleAuthorize
       }));
     case 'forbidden':
-      return /*#__PURE__*/React.createElement(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+      return /*#__PURE__*/React.createElement(ForbiddenView, _extends({}, blockCardProps, {
         onAuthorize: handleAuthorize
       }));
     case 'not_found':
-      return /*#__PURE__*/React.createElement(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+      return /*#__PURE__*/React.createElement(NotFoundView, _extends({}, blockCardProps, {
         onAuthorize: handleAuthorize
       }));
     case 'fallback':
@@ -74,7 +74,7 @@ export const BlockCard = ({
           testId: `${testId}-${status}`
         });
       }
-      return /*#__PURE__*/React.createElement(FlexibleErroredView, _extends({}, flexibleBlockCardProps, {
+      return /*#__PURE__*/React.createElement(ErroredView, _extends({}, blockCardProps, {
         onAuthorize: handleAuthorize
       }));
   }

package/dist/es2019/view/BlockCard/views/{flexible/FlexibleErroredView.js → ErroredView.js}

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { R300 } from '@atlaskit/theme/colors';
-import { messages } from '../../../../messages';
-import Text from '../../../FlexibleCard/components/elements/text';
-import { RetryAction } from '../../actions/flexible/RetryAction';
+import { messages } from '../../../messages';
+import Text from '../../FlexibleCard/components/elements/text';
+import { RetryAction } from '../actions/RetryAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
@@ -14,7 +14,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const FlexibleErroredView = ({
+const ErroredView = ({
   testId = 'smart-block-errored-view',
   ...props
 }) => {
@@ -34,4 +34,4 @@ const FlexibleErroredView = ({
     }
   }));
 };
-export default withFlexibleUIBlockCardStyle(FlexibleErroredView);
+export default withFlexibleUIBlockCardStyle(ErroredView);

package/dist/es2019/view/BlockCard/views/{flexible/FlexibleForbiddenView.js → ForbiddenView.js}

@@ -5,13 +5,13 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import LockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { R300 } from '@atlaskit/theme/colors';
-import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
-import extractHostname from '../../../../extractors/common/hostname/extractHostname';
-import { messages } from '../../../../messages';
-import { toMessage } from '../../../../utils/intl-utils';
-import { getForbiddenJsonLd } from '../../../../utils/jsonld';
-import Text from '../../../FlexibleCard/components/elements/text';
-import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
+import { extractRequestAccessContextImproved } from '../../../extractors/common/context/extractAccessContext';
+import extractHostname from '../../../extractors/common/hostname/extractHostname';
+import { messages } from '../../../messages';
+import { toMessage } from '../../../utils/intl-utils';
+import { getForbiddenJsonLd } from '../../../utils/jsonld';
+import Text from '../../FlexibleCard/components/elements/text';
+import { ForbiddenAction } from '../actions/ForbiddenAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
@@ -22,7 +22,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const FlexibleForbiddenView = ({
+const ForbiddenView = ({
   testId = 'smart-block-forbidden-view',
   ...props
 }) => {
@@ -91,4 +91,4 @@ const FlexibleForbiddenView = ({
     }
   }));
 };
-export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);
+export default withFlexibleUIBlockCardStyle(ForbiddenView);

package/dist/es2019/view/BlockCard/views/{flexible/FlexibleNotFoundView.js → NotFoundView.js}

@@ -4,8 +4,8 @@ import { useIntl } from 'react-intl-next';
 import LockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { R300 } from '@atlaskit/theme/colors';
-import { messages } from '../../../../messages';
-import Text from '../../../FlexibleCard/components/elements/text';
+import { messages } from '../../../messages';
+import Text from '../../FlexibleCard/components/elements/text';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
@@ -15,7 +15,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const FlexibleNotFoundView = ({
+const NotFoundView = ({
   testId = 'smart-block-not-found-view',
   ...props
 }) => {
@@ -49,4 +49,4 @@ const FlexibleNotFoundView = ({
     maxLines: 3
   }));
 };
-export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);
+export default withFlexibleUIBlockCardStyle(NotFoundView);

package/dist/es2019/view/BlockCard/views/{flexible/FlexibleResolvedView.js → ResolvedView.js}

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useMemo, useState } from 'react';
-import { ActionName, ElementName, SmartLinkPosition } from '../../../../constants';
-import FlexibleCard from '../../../FlexibleCard';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
+import { ActionName, ElementName, SmartLinkPosition } from '../../../constants';
+import FlexibleCard from '../../FlexibleCard';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { metadataBlockCss } from './styled';
 import { FlexibleCardUiOptions, FooterBlockOptions, getSimulatedBetterMetadata, PreviewBlockOptions, titleBlockOptions } from './utils';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
@@ -12,7 +12,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const FlexibleResolvedView = ({
+const ResolvedView = ({
   cardState,
   onClick,
   onError,
@@ -75,4 +75,4 @@ const FlexibleResolvedView = ({
     actions: footerActions
   })));
 };
-export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);
+export default withFlexibleUIBlockCardStyle(ResolvedView);

package/dist/es2019/view/BlockCard/views/{flexible/FlexibleUnauthorisedView.js → UnauthorisedView.js}

@@ -9,11 +9,11 @@ import { useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { extractProvider } from '@atlaskit/link-extractors';
-import { useAnalyticsEvents } from '../../../../common/analytics/generated/use-analytics-events';
-import { messages } from '../../../../messages';
-import { hasAuthScopeOverrides } from '../../../../state/helpers';
-import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
-import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../messages';
+import { hasAuthScopeOverrides } from '../../../state/helpers';
+import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
+import { AuthorizeAction } from '../actions/AuthorizeAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 const contentStyles = css({
@@ -29,7 +29,7 @@ const contentStyles = css({
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const FlexibleUnauthorisedView = ({
+const UnauthorisedView = ({
   testId = 'smart-block-unauthorized-view',
   ...props
 }) => {
@@ -70,4 +70,4 @@ const FlexibleUnauthorisedView = ({
     "data-testid": `${testId}-content`
   }, content));
 };
-export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);
+export default withFlexibleUIBlockCardStyle(UnauthorisedView);

package/dist/es2019/view/BlockCard/views/{flexible/unresolved-view → unresolved-view}/index.js

@@ -3,8 +3,8 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import FlexibleCard from '../../../../FlexibleCard';
-import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import FlexibleCard from '../../../FlexibleCard';
+import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { FlexibleCardUiOptions, FooterBlockOptions, PreviewBlockOptions, titleBlockOptions } from '../utils';
 const customBlockStyles = css({
   alignItems: 'flex-start'

package/dist/es2019/view/BlockCard/views/{flexible/utils → utils}/index.js

@@ -1,7 +1,7 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import { extractOwnedBy } from '../../../../../extractors/flexible/utils';
-import { getExtensionKey } from '../../../../../state/helpers';
+import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
+import { extractOwnedBy } from '../../../../extractors/flexible/utils';
+import { getExtensionKey } from '../../../../state/helpers';
 import { footerBlockCss, titleBlockCss } from '../styled';
 const baseTopMetadata = [{
   name: ElementName.ModifiedOn

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

@@ -4,6 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
+import { succeedUfoExperience } from '../../state/analytics';
 import { getCanBeDatasource, getClickUrl, getDefinitionId, getExtensionKey, getProduct, getResourceType, getServices, getSubproduct, isFinalState } from '../../state/helpers';
 import { SmartLinkModalProvider } from '../../state/modal';
 import { isSpecialEvent } from '../../utils';
@@ -154,16 +155,32 @@ function Component({
   // - the unresolved states: viz. forbidden, not_found, unauthorized, errored.
   useEffect(() => {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent({
-        display: isFlexibleUi ? 'flexible' : appearance,
-        status: state.status,
-        id,
-        definitionId,
-        extensionKey,
-        canBeDatasource
-      });
+      if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+          extensionKey,
+          display: isFlexibleUi ? 'flexible' : appearance
+        });
+
+        // UFO will disregard this if authentication experience has not yet been started
+        succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+          display: isFlexibleUi ? 'flexible' : appearance
+        });
+        fireEvent('ui.smartLink.renderSuccess', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          display: isFlexibleUi ? 'flexible' : appearance
+        });
+      } else {
+        analytics.ui.renderSuccessEvent({
+          display: isFlexibleUi ? 'flexible' : appearance,
+          status: state.status,
+          id,
+          definitionId,
+          extensionKey,
+          canBeDatasource
+        });
+      }
     }
-  }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
+  }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource, fireEvent]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,

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

@@ -2,8 +2,10 @@ import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { di } from 'react-magnetic-di';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
-import { useSmartLinkAnalytics } from '../../state/analytics';
+import { useSmartLinkAnalytics } from '../../state';
+import { failUfoExperience, startUfoExperience } from '../../state/analytics';
 import { importWithRetry } from '../../utils';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import { clearMarks, clearMeasures } from '../../utils/performance';
@@ -71,12 +73,24 @@ export function CardWithURLRenderer(props) {
         definitionId: null
       });
     } else if (error.name !== 'APIError') {
-      analytics.ui.renderFailedEvent({
-        display: isFlexibleUi ? 'flexible' : appearance,
-        id,
-        error,
-        errorInfo
-      });
+      if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        startUfoExperience('smart-link-rendered', id || 'NULL');
+        failUfoExperience('smart-link-rendered', id || 'NULL');
+        failUfoExperience('smart-link-authenticated', id || 'NULL');
+        fireEvent('ui.smartLink.renderFailed', {
+          display: isFlexibleUi ? 'flexible' : appearance,
+          id: id !== null && id !== void 0 ? id : null,
+          error: error,
+          errorInfo: errorInfo
+        });
+      } else {
+        analytics.ui.renderFailedEvent({
+          display: isFlexibleUi ? 'flexible' : appearance,
+          id,
+          error,
+          errorInfo
+        });
+      }
     }
     onError && onError({
       status: 'errored',

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
-import { handleClickCommon } from '../../BlockCard/utils/handlers';
+import { handleClickCommon } from '../../common/utils';
 import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
 export const ExpandedFrame = ({
   isPlaceholder = false,

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

@@ -6,7 +6,7 @@ import { extractEmbedProps } from '../../extractors/embed';
 import { extractInlineProps } from '../../extractors/inline';
 import { getExtensionKey, hasAuthScopeOverrides } from '../../state/helpers';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
-import FlexibleResolvedView from '../BlockCard/views/flexible/FlexibleResolvedView';
+import BlockCardResolvedView from '../BlockCard/views/ResolvedView';
 import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
 import { EmbedCardErroredView } from './views/ErroredView';
 import ForbiddenView from './views/forbidden-view';
@@ -48,7 +48,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
+      return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
         url: url,
         cardState: cardState,
         onClick: handleFrameClick,
@@ -89,7 +89,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
             onClick: handleFrameClick
           }));
         }
-        return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
+        return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
           url: url,
           cardState: cardState,
           onClick: handleFrameClick,

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -10,8 +10,8 @@ import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
-import { Frame } from '../../BlockCard/components/Frame';
 import { gs } from '../../common/utils';
+import { Frame } from '../components/ErrorFrame';
 const messageStyles = css({
   font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-regular, 400)",

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

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
-import { getCanBeDatasource } from '../../../../../state/helpers';
+import { succeedUfoExperience } from '../../../../../state/analytics';
+import { getCanBeDatasource, getDefinitionId } from '../../../../../state/helpers';
 import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { getMetadata } from '../../../utils';
@@ -14,19 +17,40 @@ const HoverCardResolvedView = ({
   flexibleCardProps,
   isAISummaryEnabled,
   onActionClick,
-  titleBlockProps
+  titleBlockProps,
+  id
 }) => {
   var _cardState$details;
-  const canBeDatasource = getCanBeDatasource(cardState.details);
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const definitionId = React.useMemo(() => getDefinitionId(cardState.details), [cardState.details]);
+  const canBeDatasource = React.useMemo(() => getCanBeDatasource(cardState.details), [cardState.details]);
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
-    analytics.ui.renderSuccessEvent({
-      display: CardDisplay.HoverCardPreview,
-      status: cardState.status,
-      canBeDatasource
-    });
-  }, [analytics.ui, cardState.status, canBeDatasource]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+        extensionKey,
+        display: CardDisplay.HoverCardPreview
+      });
+
+      // UFO will disregard this if authentication experience has not yet been started
+      succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+        display: CardDisplay.HoverCardPreview
+      });
+      fireEvent('ui.smartLink.renderSuccess', {
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        display: CardDisplay.HoverCardPreview
+      });
+    } else {
+      analytics.ui.renderSuccessEvent({
+        display: CardDisplay.HoverCardPreview,
+        status: cardState.status,
+        canBeDatasource
+      });
+    }
+  }, [analytics.ui, cardState.status, canBeDatasource, fireEvent, definitionId, extensionKey, id]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const {
     primary,

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

@@ -9,11 +9,17 @@ import { jsx } from '@emotion/react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { di } from 'react-magnetic-di';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
-import { useSmartLinkAnalytics } from '../../state/analytics';
+import { useSmartLinkAnalytics } from '../../state';
+import { failUfoExperience, startUfoExperience } from '../../state/analytics';
 import { SmartLinkModalProvider } from '../../state/modal';
 import { HoverCardComponent } from './components/HoverCardComponent';
 const HoverCardWithErrorBoundary = props => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   const {
     url,
     id,
@@ -21,13 +27,25 @@ const HoverCardWithErrorBoundary = props => {
   } = props;
   const analytics = useSmartLinkAnalytics(url, id);
   const onError = useCallback((error, info) => {
-    analytics.ui.renderFailedEvent({
-      display: CardDisplay.HoverCardPreview,
-      id,
-      error,
-      errorInfo: info
-    });
-  }, [analytics.ui, id]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      startUfoExperience('smart-link-rendered', id || 'NULL');
+      failUfoExperience('smart-link-rendered', id || 'NULL');
+      failUfoExperience('smart-link-authenticated', id || 'NULL');
+      fireEvent('ui.smartLink.renderFailed', {
+        display: CardDisplay.HoverCardPreview,
+        id: id !== null && id !== void 0 ? id : null,
+        error: error,
+        errorInfo: info
+      });
+    } else {
+      analytics.ui.renderFailedEvent({
+        display: CardDisplay.HoverCardPreview,
+        id,
+        error,
+        errorInfo: info
+      });
+    }
+  }, [analytics.ui, id, fireEvent]);
   return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "32.7.2",
+  packageVersion: "32.7.4",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/common/access/ForbiddenAction.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../messages';
+export const ForbiddenAction = (handler, id = 'connect-other-account', message = messages.try_another_account, values = {}) => ({
+  id,
+  text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+    values: values
+  })),
+  promise: () => new Promise(resolve => resolve(handler())),
+  buttonAppearance: 'default'
+});

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

@@ -6,4 +6,11 @@ import facepaint from 'facepaint';
 const gs = times => `${8 * times}px`;
 const br = (times = 1) => `${3 * times}px`;
 const mq = facepaint(['@media(min-width: 576px)']);
-export { gs, br, mq };
+export { gs, br, mq };
+export const handleClickCommon = (event, onClick) => {
+  if (onClick) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick(event);
+  }
+};

package/dist/esm/extractors/common/context/extractAccessContext.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import { messages } from '../../../messages';
 import { ANALYTICS_CHANNEL } from '../../../utils/analytics';
-import { ForbiddenAction } from '../../../view/BlockCard/actions/ForbiddenAction';
+import { ForbiddenAction } from '../../../view/common/access/ForbiddenAction';
 import extractHostname from '../hostname/extractHostname';
 export var extractRequestAccessContextImproved = function extractRequestAccessContextImproved(_ref) {
   var _jsonLd$requestAccess;

package/dist/esm/utils/analytics/analytics.js

@@ -10,7 +10,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "32.7.2"
+  packageVersion: "32.7.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/actions/{flexible/AuthorizeAction.js → AuthorizeAction.js}

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { ActionName } from '../../../../constants';
-import { messages } from '../../../../messages';
+import { ActionName } from '../../../constants';
+import { messages } from '../../../messages';
 /**
  * Returns a CustomActionItem with a "Connect to <providerName>" message
  *

package/dist/esm/view/BlockCard/actions/ForbiddenAction.js

@@ -1,21 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../constants';
 import { messages } from '../../../messages';
-export var ForbiddenAction = function ForbiddenAction(handler) {
-  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'connect-other-account';
-  var message = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : messages.try_another_account;
-  var values = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onClick a function that will be called on the click of the button
+ * @param content is a message key for a message to be displayed in the action
+ * @param context is a variable for a message in case a message contains a placeholder
+ */
+export var ForbiddenAction = function ForbiddenAction(onClick, content, context, isDisabled) {
   return {
-    id: id,
-    text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
-      values: values
+    name: ActionName.CustomAction,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
+      values: context
     })),
-    promise: function promise() {
-      return new Promise(function (resolve) {
-        return resolve(handler());
-      });
-    },
-    buttonAppearance: 'default'
+    onClick: onClick,
+    testId: 'smart-action-connect-other-account',
+    isDisabled: isDisabled
   };
 };

package/dist/esm/view/BlockCard/actions/{flexible/RetryAction.js → RetryAction.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { ActionName } from '../../../../constants';
-import { messages } from '../../../../messages';
+import { ActionName } from '../../../constants';
+import { messages } from '../../../messages';
 /**
  * Returns a CustomActionItem with a "Retry" default message
  *