@atlaskit/smart-card 32.3.0 → 32.5.0

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

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "32.3.0"
+  packageVersion: "32.5.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -51,6 +51,10 @@ export const fireSmartLinkEvent = (payload, createAnalyticsEvent) => {
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);
   }
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const resolvedEvent = props => ({
   action: 'resolved',
   actionSubject: 'smartLink',
@@ -60,6 +64,10 @@ export const resolvedEvent = props => ({
     ...context
   }
 });
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const unresolvedEvent = ({
   id,
   definitionId,
@@ -163,6 +171,10 @@ export const invokeFailedEvent = ({
     }
   };
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const connectSucceededEvent = ({
   definitionId,
   extensionKey,
@@ -182,6 +194,10 @@ export const connectSucceededEvent = ({
     location
   }
 });
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const connectFailedEvent = ({
   definitionId,
   extensionKey,
@@ -465,6 +481,10 @@ export const uiLearnMoreLinkClickedEvent = () => ({
     ...context
   }
 });
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const chunkloadFailedEvent = ({
   display,
   error,

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

@@ -1,6 +1,10 @@
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
 export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from './analytics';
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export const instrumentEvent = ({
   id,
   status,

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } 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 { useSmartLink } from '../../state';
@@ -116,18 +117,39 @@ function Component({
   useEffect(() => {
     measure.mark(id, state.status);
     if (state.status !== 'pending' && state.status !== 'resolving') {
-      var _state$error;
       measure.create(id, state.status);
-      analytics.operational.instrument({
-        id,
-        status: state.status,
-        definitionId,
-        extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.extensionKey,
-        resourceType,
-        error: state.error
-      });
+      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
+        });
+      }
     }
-  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational]);
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational, fireEvent]);
 
   // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:
@@ -243,6 +265,7 @@ function Component({
       return /*#__PURE__*/React.createElement(EmbedCard, {
         id: id,
         url: url,
+        renderers: renderers,
         cardState: state,
         iframeUrlType: embedIframeUrlType,
         handleAuthorize: services.length && handleAuthorize || undefined,

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

@@ -2,6 +2,8 @@ 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';
 import { isFlexibleUiCard } from '../../utils/flexible';
@@ -10,6 +12,9 @@ import { LoadingCardLink } from './component-lazy/LoadingCardLink';
 export const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => importWithRetry(() => import( /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */'./component-lazy/index')));
 export function CardWithURLRenderer(props) {
   const [id] = useState(() => props.id ? props.id : uuid());
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   useEffect(() => {
     // ComponentWillUnmount
     return () => {
@@ -60,11 +65,20 @@ 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') {
-      analytics.operational.chunkloadFailedEvent({
-        display: appearance,
-        error,
-        errorInfo
-      });
+      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
+        });
+      }
     } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: isFlexibleUi ? 'flexible' : appearance,
@@ -78,7 +92,7 @@ export function CardWithURLRenderer(props) {
       url: url !== null && url !== void 0 ? url : '',
       err: error
     });
-  }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi]);
+  }, [analytics.operational, 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,6 +1,7 @@
 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';
@@ -8,6 +9,7 @@ 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';
 import ForbiddenView from './views/forbidden-view';
@@ -16,10 +18,7 @@ import { EmbedCardResolvedView } from './views/ResolvedView';
 import UnauthorizedView from './views/unauthorized-view';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
-  cardState: {
-    status,
-    details
-  },
+  cardState,
   handleAuthorize,
   handleErrorRetry,
   handleFrameClick,
@@ -35,12 +34,17 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   onIframeDwell,
   onIframeFocus,
   iframeUrlType,
-  actionOptions
+  actionOptions,
+  renderers
 }, iframeRef) => {
   var _details$meta, _forbiddenViewProps$c, _forbiddenViewProps$c2, _notFoundViewProps$co, _notFoundViewProps$co2;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    status,
+    details
+  } = cardState;
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extensionKey = getExtensionKey(details);
@@ -48,6 +52,19 @@ 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,
@@ -83,6 +100,19 @@ 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',

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

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

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

@@ -4,8 +4,10 @@ import { useCallback, useMemo } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ACTION_RESOLVING, ACTION_UPDATE_METADATA_STATUS, cardAction } from '@atlaskit/linking-common';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { SmartLinkStatus } from '../../constants';
+import { startUfoExperience } from '../analytics';
 import { getByDefinitionId, getDefinitionId, getExtensionKey, getServices } from '../helpers';
 import useInvokeClientAction from '../hooks/use-invoke-client-action';
 import useResolve from '../hooks/use-resolve';
@@ -119,19 +121,41 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
         fireEvent('track.applicationAccount.connected', {
           definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
         });
-        analytics.operational.connectSucceededEvent({
-          id: id,
-          definitionId: definitionId,
-          extensionKey: extensionKey
-        });
+        if (fg('platform_smart-card-migrate-operational-analytics')) {
+          startUfoExperience('smart-link-authenticated', id, {
+            extensionKey: extensionKey,
+            status: 'success'
+          });
+          fireEvent('operational.smartLink.connectSucceeded', {
+            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
+          });
+        } else {
+          analytics.operational.connectSucceededEvent({
+            id: id,
+            definitionId: definitionId,
+            extensionKey: extensionKey
+          });
+        }
         reload();
       }, function (err) {
-        analytics.operational.connectFailedEvent({
-          id: id,
-          definitionId: definitionId,
-          extensionKey: extensionKey,
-          reason: err.type
-        });
+        if (fg('platform_smart-card-migrate-operational-analytics')) {
+          var _err$type;
+          startUfoExperience('smart-link-authenticated', id, {
+            extensionKey: extensionKey,
+            status: err.type
+          });
+          fireEvent('operational.smartLink.connectFailed', {
+            definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+            reason: (_err$type = err.type) !== null && _err$type !== void 0 ? _err$type : null
+          });
+        } else {
+          analytics.operational.connectFailedEvent({
+            id: id,
+            definitionId: definitionId,
+            extensionKey: extensionKey,
+            reason: err.type
+          });
+        }
         if (err.type === 'auth_window_closed') {
           analytics.ui.closedAuthEvent({
             display: appearance,

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

@@ -511,6 +511,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
        * @param id The unique ID for this Smart Link.
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+       * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
        */
       connectSucceededEvent: function connectSucceededEvent(_ref13) {
         var id = _ref13.id,
@@ -541,6 +542,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param reason The reason why the Smart Link connect account failed.
+       * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
        */
       connectFailedEvent: function connectFailedEvent(_ref14) {
         var id = _ref14.id,
@@ -575,6 +577,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param resourceType The type of resource that was invoked. This is provider specific (e.g. File, PullRequest).
        * @param error An error representing why the Smart Link request failed.
+       * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
        */
       instrument: function instrument(_ref15) {
         var id = _ref15.id,
@@ -602,11 +605,12 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
         }
       },
       /**
-       * This fires an event that represents when a Smart Link renders unsuccessfuly.
+       * This fires an event that represents when a Smart Link renders unsuccessfully.
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
        * @param id The unique ID for this Smart Link.
        * @param error: An error representing why the Smart Link render failed.
        * @param errorInfo: Additional details about the error including the stack trace.
+       * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
        */
       chunkloadFailedEvent: function chunkloadFailedEvent(_ref16) {
         var display = _ref16.display,

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.3.0"
+  packageVersion: "32.5.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -57,6 +57,10 @@ export var fireSmartLinkEvent = function fireSmartLinkEvent(payload, createAnaly
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);
   }
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var resolvedEvent = function resolvedEvent(props) {
   return {
     action: 'resolved',
@@ -65,6 +69,10 @@ export var resolvedEvent = function resolvedEvent(props) {
     attributes: _objectSpread(_objectSpread({}, props), context)
   };
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var unresolvedEvent = function unresolvedEvent(_ref) {
   var id = _ref.id,
     definitionId = _ref.definitionId,
@@ -159,6 +167,10 @@ export var invokeFailedEvent = function invokeFailedEvent(_ref3) {
     })
   };
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var connectSucceededEvent = function connectSucceededEvent(_ref4) {
   var definitionId = _ref4.definitionId,
     extensionKey = _ref4.extensionKey,
@@ -178,6 +190,10 @@ export var connectSucceededEvent = function connectSucceededEvent(_ref4) {
     })
   };
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var connectFailedEvent = function connectFailedEvent(_ref5) {
   var definitionId = _ref5.definitionId,
     extensionKey = _ref5.extensionKey,
@@ -461,6 +477,10 @@ export var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent()
     attributes: _objectSpread({}, context)
   };
 };
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var chunkloadFailedEvent = function chunkloadFailedEvent(_ref16) {
   var display = _ref16.display,
     error = _ref16.error,

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

@@ -4,6 +4,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
 export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from './analytics';
+
+/**
+ * @deprecated remove with platform_smart-card-migrate-operational-analytics clean up
+ */
 export var instrumentEvent = function instrumentEvent(_ref) {
   var id = _ref.id,
     status = _ref.status,

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } 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 { useSmartLink } from '../../state';
@@ -118,18 +119,39 @@ function Component(_ref) {
   useEffect(function () {
     measure.mark(id, state.status);
     if (state.status !== 'pending' && state.status !== 'resolving') {
-      var _state$error;
       measure.create(id, state.status);
-      analytics.operational.instrument({
-        id: id,
-        status: state.status,
-        definitionId: definitionId,
-        extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.extensionKey,
-        resourceType: resourceType,
-        error: state.error
-      });
+      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: id,
+          status: state.status,
+          definitionId: definitionId,
+          extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error2 = state.error) === null || _state$error2 === void 0 ? void 0 : _state$error2.extensionKey,
+          resourceType: resourceType,
+          error: state.error
+        });
+      }
     }
-  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational]);
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational, fireEvent]);
 
   // NB: once the smart-card has rendered into an end state, we capture
   // this as a successful render. These can be one of:
@@ -245,6 +267,7 @@ function Component(_ref) {
       return /*#__PURE__*/React.createElement(EmbedCard, {
         id: id,
         url: url,
+        renderers: renderers,
         cardState: state,
         iframeUrlType: embedIframeUrlType,
         handleAuthorize: services.length && handleAuthorize || undefined,

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

@@ -3,6 +3,8 @@ 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';
 import { isFlexibleUiCard } from '../../utils/flexible';
@@ -19,6 +21,8 @@ export function CardWithURLRenderer(props) {
     }),
     _useState2 = _slicedToArray(_useState, 1),
     id = _useState2[0];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
   useEffect(function () {
     // ComponentWillUnmount
     return function () {
@@ -65,11 +69,20 @@ 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') {
-      analytics.operational.chunkloadFailedEvent({
-        display: appearance,
-        error: error,
-        errorInfo: errorInfo
-      });
+      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: error,
+          errorInfo: errorInfo
+        });
+      }
     } else if (error.name !== 'APIError') {
       analytics.ui.renderFailedEvent({
         display: isFlexibleUi ? 'flexible' : appearance,
@@ -83,7 +96,7 @@ export function CardWithURLRenderer(props) {
       url: url !== null && url !== void 0 ? url : '',
       err: error
     });
-  }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi]);
+  }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }

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

@@ -1,6 +1,7 @@
 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';
@@ -8,6 +9,7 @@ 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';
 import ForbiddenView from './views/forbidden-view';
@@ -17,9 +19,7 @@ import UnauthorizedView from './views/unauthorized-view';
 export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c, _forbiddenViewProps$c2, _notFoundViewProps$co, _notFoundViewProps$co2;
   var url = _ref.url,
-    _ref$cardState = _ref.cardState,
-    status = _ref$cardState.status,
-    details = _ref$cardState.details,
+    cardState = _ref.cardState,
     handleAuthorize = _ref.handleAuthorize,
     handleErrorRetry = _ref.handleErrorRetry,
     handleFrameClick = _ref.handleFrameClick,
@@ -35,9 +35,12 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
     onIframeDwell = _ref.onIframeDwell,
     onIframeFocus = _ref.onIframeFocus,
     iframeUrlType = _ref.iframeUrlType,
-    actionOptions = _ref.actionOptions;
+    actionOptions = _ref.actionOptions,
+    renderers = _ref.renderers;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var status = cardState.status,
+    details = cardState.details;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extensionKey = getExtensionKey(details);
@@ -45,6 +48,19 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
   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,
@@ -80,6 +96,19 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
             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
+          });
+        }
         var resolvedBlockViewProps = extractBlockProps(data, meta, {
           analytics: analytics,
           origin: 'smartLinkEmbed',