@atlaskit/smart-card 32.5.1 → 32.6.0

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

@@ -76,16 +76,25 @@ function Component({
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent({
-      id,
-      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
-      status: state.status,
-      definitionId,
-      extensionKey,
-      isModifierKeyPressed,
-      destinationProduct: product,
-      destinationSubproduct: subproduct
-    });
+    if (fg('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.smartLink.clicked', {
+        id,
+        display: isFlexibleUi ? CardDisplay.Flexible : appearance,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        isModifierKeyPressed
+      });
+    } else {
+      analytics.ui.cardClickedEvent({
+        id,
+        display: isFlexibleUi ? CardDisplay.Flexible : appearance,
+        status: state.status,
+        definitionId,
+        extensionKey,
+        isModifierKeyPressed,
+        destinationProduct: product,
+        destinationSubproduct: subproduct
+      });
+    }
     if (!onClick && !isFlexibleUi) {
       const clickUrl = getClickUrl(url, state.details);
       // Ctrl+left click on mac typically doesn't trigger onClick
@@ -105,7 +114,7 @@ function Component({
       }
       fireLinkClickedEvent(createAnalyticsEvent)(event);
     }
-  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent]);
+  }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent, fireEvent]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();
@@ -117,39 +126,27 @@ function Component({
   useEffect(() => {
     measure.mark(id, state.status);
     if (state.status !== 'pending' && state.status !== 'resolving') {
+      var _state$error;
       measure.create(id, state.status);
-      if (fg('platform_smart-card-migrate-operational-analytics')) {
-        var _state$error;
-        if (state.status === 'resolved') {
-          var _measure$getMeasure$d, _measure$getMeasure;
-          fireEvent('operational.smartLink.resolved', {
-            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-            duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
-          });
-        } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
-          fireEvent('operational.smartLink.unresolved', {
-            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-            reason: state.status,
-            error: state.error === undefined ? null : {
-              name: state.error.name,
-              kind: state.error.kind,
-              type: state.error.type
-            }
-          });
-        }
-      } else {
-        var _state$error2;
-        analytics.operational.instrument({
-          id,
-          status: state.status,
-          definitionId,
-          extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error2 = state.error) === null || _state$error2 === void 0 ? void 0 : _state$error2.extensionKey,
-          resourceType,
-          error: state.error
+      if (state.status === 'resolved') {
+        var _measure$getMeasure$d, _measure$getMeasure;
+        fireEvent('operational.smartLink.resolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
+        });
+      } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
+        fireEvent('operational.smartLink.unresolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          reason: state.status,
+          error: state.error === undefined ? null : {
+            name: state.error.name,
+            kind: state.error.kind,
+            type: state.error.type
+          }
         });
       }
     }
-  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational, fireEvent]);
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
 
   // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:

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

@@ -2,7 +2,6 @@ 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 { importWithRetry } from '../../utils';
@@ -65,20 +64,12 @@ export function CardWithURLRenderer(props) {
     // to the reliability of the smart-card front-end components.
     // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
     if (error.name === 'ChunkLoadError') {
-      if (fg('platform_smart-card-migrate-operational-analytics')) {
-        fireEvent('operational.smartLink.chunkLoadFailed', {
-          display: appearance,
-          error: error,
-          errorInfo: errorInfo,
-          definitionId: null
-        });
-      } else {
-        analytics.operational.chunkloadFailedEvent({
-          display: appearance,
-          error,
-          errorInfo
-        });
-      }
+      fireEvent('operational.smartLink.chunkLoadFailed', {
+        display: appearance,
+        error: error,
+        errorInfo: errorInfo,
+        definitionId: null
+      });
     } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: isFlexibleUi ? 'flexible' : appearance,
@@ -92,7 +83,7 @@ export function CardWithURLRenderer(props) {
       url: url !== null && url !== void 0 ? url : '',
       err: error
     });
-  }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
+  }, [analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }

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

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { extractBlockProps } from '../../extractors/block';
 import { extractRequestAccessContextImproved } from '../../extractors/common/context/extractAccessContext';
 import { extractEmbedProps } from '../../extractors/embed';
 import { extractInlineProps } from '../../extractors/inline';
 import { getExtensionKey, hasAuthScopeOverrides } from '../../state/helpers';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
-import { BlockCardResolvedView, BlockCardResolvingView } from '../BlockCard';
 import FlexibleResolvedView from '../BlockCard/views/flexible/FlexibleResolvedView';
 import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
 import { EmbedCardErroredView } from './views/ErroredView';
@@ -23,7 +20,6 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   handleErrorRetry,
   handleFrameClick,
   analytics,
-  handleInvoke,
   isSelected,
   frameStyle,
   platform,
@@ -52,23 +48,16 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   switch (status) {
     case 'pending':
     case 'resolving':
-      if (fg('smart-card-remove-block-card-from-embed')) {
-        return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
-          url: url,
-          cardState: cardState,
-          onClick: handleFrameClick,
-          onError: onError,
-          onResolve: onResolve,
-          renderers: renderers,
-          actionOptions: actionOptions,
-          analytics: analytics,
-          testId: testId
-        });
-      }
-      return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
-        testId: "embed-card-resolving-view",
-        inheritDimensions: inheritDimensions,
-        isSelected: isSelected
+      return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
+        url: url,
+        cardState: cardState,
+        onClick: handleFrameClick,
+        onError: onError,
+        onResolve: onResolve,
+        renderers: renderers,
+        actionOptions: actionOptions,
+        analytics: analytics,
+        testId: testId ? `${testId}-resolving-view` : 'embed-card-resolving-view'
       });
     case 'resolved':
       const resolvedViewProps = extractEmbedProps(data, meta, platform, iframeUrlType);
@@ -100,31 +89,17 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
             onClick: handleFrameClick
           }));
         }
-        if (fg('smart-card-remove-block-card-from-embed')) {
-          return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
-            url: url,
-            cardState: cardState,
-            onClick: handleFrameClick,
-            onError: onError,
-            onResolve: onResolve,
-            renderers: renderers,
-            actionOptions: actionOptions,
-            analytics: analytics,
-            testId: testId
-          });
-        }
-        const resolvedBlockViewProps = extractBlockProps(data, meta, {
-          analytics,
-          origin: 'smartLinkEmbed',
-          handleInvoke,
-          extensionKey,
-          actionOptions
+        return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
+          url: url,
+          cardState: cardState,
+          onClick: handleFrameClick,
+          onError: onError,
+          onResolve: onResolve,
+          renderers: renderers,
+          actionOptions: actionOptions,
+          analytics: analytics,
+          testId: testId
         });
-        return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedBlockViewProps, {
-          isSelected: isSelected,
-          testId: testId,
-          onClick: handleFrameClick
-        }));
       }
     case 'unauthorized':
       if (onError) {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import useInvoke from '../../../../../../state/hooks/use-invoke';
@@ -26,9 +27,17 @@ const ServerAction = ({
       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
-        });
+        if (fg('platform_migrate-some-ui-events-smart-card')) {
+          if (smartLinkActionType === 'FollowEntityAction' || smartLinkActionType === 'UnfollowEntityAction') {
+            fireEvent('ui.button.clicked.smartLinkFollowButton', {});
+          } else {
+            fireEvent(`ui.button.clicked.${smartLinkActionType}`, {});
+          }
+        } else {
+          analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkServerActionClickedEvent({
+            smartLinkActionType
+          });
+        }
         fireEvent('track.smartLinkQuickAction.started', {
           smartLinkActionType
         });

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

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
 import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
@@ -63,7 +64,11 @@ const LozengeAction = ({
   const handleOpenChange = useCallback(async args => {
     setIsOpen(args.isOpen);
     if (args.isOpen) {
-      analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionClickedEvent();
+      if (fg('platform_migrate-some-ui-events-smart-card')) {
+        fireEvent('ui.button.clicked.smartLinkStatusLozenge', {});
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionClickedEvent();
+      }
       fireEvent('track.smartLinkQuickAction.started', {
         smartLinkActionType: TrackQuickActionType.StatusUpdate
       });
@@ -100,7 +105,11 @@ const LozengeAction = ({
   })), [selected.appearance, selected.text, isOpen, testId]);
   const handleItemClick = useCallback(async (id, text, appearance) => {
     try {
-      analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionListItemClickedEvent();
+      if (fg('platform_migrate-some-ui-events-smart-card')) {
+        fireEvent('ui.button.clicked.smartLinkStatusListItem', {});
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionListItemClickedEvent();
+      }
       const updateAction = action === null || action === void 0 ? void 0 : action.update;
       if (updateAction && id) {
         setIsLoading(true);

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

@@ -9,7 +9,9 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R50, R500 } from '@atlaskit/theme/colors';
+import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../../../messages';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
 import useResolve from '../../../../../../../state/hooks/use-resolve';
@@ -23,6 +25,9 @@ const LozengeActionError = ({
   url,
   previewData
 }) => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   const reload = useResolve();
   const analytics = useFlexibleUiAnalyticsContext();
   const isPreviewAvailable = previewData && previewData.src !== undefined;
@@ -33,14 +38,18 @@ const LozengeActionError = ({
   }, [reload, url]);
   const handlePreviewOpen = useCallback(() => {
     if (isPreviewAvailable) {
-      analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
+      if (fg('platform_migrate-some-ui-events-smart-card')) {
+        fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
+      }
       return openEmbedModalWithFlexibleUiIcon({
         ...previewData,
         analytics,
         onClose: handlePreviewClose
       });
     }
-  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
+  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData, fireEvent]);
   const content = useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: contentStyles

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

@@ -6,11 +6,13 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { useSmartLinkAnalytics } from '../../../state/analytics';
-import { getExtensionKey, getServices } from '../../../state/helpers';
+import { getDefinitionId, getExtensionKey, getServices } from '../../../state/helpers';
 import { useSmartCardState } from '../../../state/store';
 import { isSpecialEvent } from '../../../utils';
 import { getIsAISummaryEnabled } from '../../../utils/ai-summary';
@@ -38,12 +40,16 @@ const HoverCardContent = ({
   var _linkState$status, _cardState$details;
   const {
     createAnalyticsEvent
+  } = useAnalyticsEventsNext();
+  const {
+    fireEvent
   } = useAnalyticsEvents();
   const defaultAnalytics = useSmartLinkAnalytics(url, id);
   const analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const linkState = useSmartCardState(url);
   const linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
+  const definitionId = useMemo(() => getDefinitionId(cardState.details), [cardState.details]);
   const {
     isAdminHubAIEnabled
   } = useSmartLinkContext();
@@ -51,6 +57,8 @@ const HoverCardContent = ({
   const services = getServices(linkState.details);
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
+  const fireEventRef = useRef(fireEvent);
+  const definitionIdRef = useRef(definitionId);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -62,37 +70,72 @@ const HoverCardContent = ({
     if (statusRef.current !== linkStatus) {
       statusRef.current = linkStatus;
     }
-  }, [analytics, linkStatus]);
+    if (fireEventRef.current !== fireEvent) {
+      fireEventRef.current = fireEvent;
+    }
+    if (definitionIdRef.current !== definitionId) {
+      definitionIdRef.current = definitionId;
+    }
+  }, [analytics, linkStatus, fireEvent, definitionId]);
   useEffect(() => {
     const previewDisplay = 'card';
     const previewInvokeMethod = 'mouse_hover';
     const cardOpenTime = Date.now();
-    analyticsRef.current.ui.hoverCardViewedEvent({
-      previewDisplay,
-      previewInvokeMethod,
-      status: statusRef.current
-    });
-    return () => {
-      const hoverTime = Date.now() - cardOpenTime;
-      analyticsRef.current.ui.hoverCardDismissedEvent({
+    const fireEventCurrent = fireEventRef.current;
+    if (fg('platform_migrate-some-ui-events-smart-card')) {
+      var _definitionIdRef$curr;
+      fireEventCurrent('ui.hoverCard.viewed', {
+        previewDisplay,
+        previewInvokeMethod,
+        definitionId: (_definitionIdRef$curr = definitionIdRef.current) !== null && _definitionIdRef$curr !== void 0 ? _definitionIdRef$curr : null
+      });
+    } else {
+      analyticsRef.current.ui.hoverCardViewedEvent({
         previewDisplay,
         previewInvokeMethod,
-        hoverTime,
         status: statusRef.current
       });
+    }
+    return () => {
+      const hoverTime = Date.now() - cardOpenTime;
+      if (fg('platform_migrate-some-ui-events-smart-card')) {
+        var _definitionIdRef$curr2;
+        fireEventCurrent('ui.hoverCard.dismissed', {
+          previewDisplay,
+          previewInvokeMethod,
+          hoverTime,
+          definitionId: (_definitionIdRef$curr2 = definitionIdRef.current) !== null && _definitionIdRef$curr2 !== void 0 ? _definitionIdRef$curr2 : null
+        });
+      } else {
+        analyticsRef.current.ui.hoverCardDismissedEvent({
+          previewDisplay,
+          previewInvokeMethod,
+          hoverTime,
+          status: statusRef.current
+        });
+      }
     };
   }, []);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent({
-      id,
-      display: CardDisplay.HoverCardPreview,
-      status: cardState.status,
-      isModifierKeyPressed,
-      actionSubjectId: 'titleGoToLink'
-    });
+    if (fg('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.smartLink.clicked.titleGoToLink', {
+        id,
+        display: CardDisplay.HoverCardPreview,
+        isModifierKeyPressed,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
+      });
+    } else {
+      analytics.ui.cardClickedEvent({
+        id,
+        display: CardDisplay.HoverCardPreview,
+        status: cardState.status,
+        isModifierKeyPressed,
+        actionSubjectId: 'titleGoToLink'
+      });
+    }
     fireLinkClickedEvent(createAnalyticsEvent)(event);
-  }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
+  }, [createAnalyticsEvent, cardState.status, analytics.ui, id, fireEvent, definitionId]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const {
     subtitle

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.5.1",
+  packageVersion: "32.6.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

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

@@ -16,7 +16,7 @@ const imgStyles = css({
   height: "var(--ds-space-100, 8px)"
 });
 const textStyles = css({
-  fontSize: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: `${`var(--ds-text-subtlest, ${N300})`}`,
   marginRight: "var(--ds-space-050, 4px)",
   marginLeft: "var(--ds-space-025, 2px)"

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CONTENT_URL_3P_ACCOUNT_AUTH, CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
 import { messages } from '../../messages';
 /**
@@ -13,9 +15,16 @@ const UnauthorisedViewContent = ({
   testId = 'unauthorised-view-content',
   analytics
 }) => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   const handleLearnMoreClick = useCallback(() => {
-    analytics === null || analytics === void 0 ? void 0 : analytics.ui.learnMoreClickedEvent();
-  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
+    if (fg('platform_migrate-some-ui-events-smart-card')) {
+      fireEvent('ui.button.clicked.learnMore', {});
+    } else {
+      analytics === null || analytics === void 0 ? void 0 : analytics.ui.learnMoreClickedEvent();
+    }
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, fireEvent]);
   const learnMoreMessage = isProductIntegrationSupported ? messages.learn_more_about_connecting_account : messages.learn_more_about_smart_links;
   return /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
     values: {