@atlaskit/smart-card 32.7.0 → 32.7.1

package/dist/es2019/extractors/flexible/actions/extract-copy-link-action.js

@@ -1,6 +1,11 @@
 import { extractLink } from '@atlaskit/link-extractors';
 import { canShowAction } from '../../../utils/actions/can-show-action';
 import { CardAction } from '../../../view/Card/types';
+import { extractInvokeCopyLinkAction } from '../../action/extract-invoke-copy-link-action';
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ * Replaced with extractCopyLinkClientAction()
+ */
 export const extractCopyLinkAction = (data, actionOptions) => {
   if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
     return;
@@ -12,4 +17,10 @@ export const extractCopyLinkAction = (data, actionOptions) => {
   return {
     url
   };
+};
+export const extractCopyLinkClientAction = param => {
+  const invokeAction = extractInvokeCopyLinkAction(param);
+  return invokeAction ? {
+    invokeAction
+  } : undefined;
 };

package/dist/es2019/extractors/flexible/actions/extract-download-action.js

@@ -1,7 +1,13 @@
 import { canShowAction } from '../../../utils/actions/can-show-action';
 import { CardAction } from '../../../view/Card/types';
+import { extractInvokeDownloadAction } from '../../action/extract-invoke-download-action';
 import { getActionsFromJsonLd } from '../../common/actions/extractActions';
 import { extractDownloadUrl } from '../../common/detail';
+
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ * Replaced with extractDownloadClientAction()
+ */
 export const extractDownloadAction = (data, actionOptions) => {
   if (!canShowAction(CardAction.DownloadAction, actionOptions)) {
     return;
@@ -13,4 +19,10 @@ export const extractDownloadAction = (data, actionOptions) => {
     };
   }
   return;
+};
+export const extractDownloadClientAction = param => {
+  const invokeAction = extractInvokeDownloadAction(param);
+  return invokeAction ? {
+    invokeAction
+  } : undefined;
 };

package/dist/es2019/extractors/flexible/actions/extract-preview-action.js

@@ -1,10 +1,16 @@
 import { extractLink, extractPreview as extractPreviewData, extractProvider, extractTitle } from '@atlaskit/link-extractors';
 import { canShowAction } from '../../../utils/actions/can-show-action';
 import { CardAction } from '../../../view/Card/types';
+import { extractInvokePreviewAction } from '../../action/extract-invoke-preview-action';
 import { extractDownloadUrl } from '../../common/detail';
 import { extractIsSupportTheming } from '../../common/meta/extractIsSupportTheming';
 import { extractIsTrusted } from '../../common/meta/extractIsTrusted';
 import { extractLinkIcon } from '../icon';
+
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ * Replaced with extractPreviewClientAction()
+ */
 export const extractPreviewAction = (response, actionOptions) => {
   var _extractPreviewData;
   if (!canShowAction(CardAction.PreviewAction, actionOptions)) {
@@ -26,4 +32,10 @@ export const extractPreviewAction = (response, actionOptions) => {
       isTrusted: extractIsTrusted(meta)
     };
   }
+};
+export const extractPreviewClientAction = param => {
+  const invokeAction = extractInvokePreviewAction(param);
+  return invokeAction ? {
+    invokeAction
+  } : undefined;
 };

package/dist/es2019/extractors/flexible/actions/extract-view-action.js

@@ -2,6 +2,10 @@ import { extractLink } from '@atlaskit/link-extractors';
 import { canShowAction } from '../../../utils/actions/can-show-action';
 import { CardAction } from '../../../view/Card/types';
 import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ */
 export const extractViewAction = (data, actionOptions) => {
   if (!canShowAction(CardAction.ViewAction, actionOptions)) {
     return;

package/dist/es2019/extractors/flexible/actions/index.js

@@ -2,11 +2,56 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName, InternalActionName } from '../../../constants';
 import { extractAISummaryAction } from './extract-ai-summary-action';
 import { extractAutomationAction } from './extract-automation-action';
-import { extractCopyLinkAction } from './extract-copy-link-action';
-import { extractDownloadAction } from './extract-download-action';
+import { extractCopyLinkAction, extractCopyLinkClientAction } from './extract-copy-link-action';
+import { extractDownloadAction, extractDownloadClientAction } from './extract-download-action';
 import extractFollowAction from './extract-follow-action';
-import { extractPreviewAction } from './extract-preview-action';
+import { extractPreviewAction, extractPreviewClientAction } from './extract-preview-action';
 import { extractViewRelatedLinksAction } from './extract-view-related-links-action';
+export const extractFlexibleCardActions = ({
+  actionOptions,
+  aiSummaryConfig,
+  appearance,
+  fireEvent,
+  id,
+  origin,
+  response,
+  url
+}) => {
+  const action = {
+    [ActionName.CopyLinkAction]: extractCopyLinkClientAction({
+      actionOptions,
+      appearance,
+      id,
+      response
+    }),
+    [ActionName.DownloadAction]: extractDownloadClientAction({
+      actionOptions,
+      appearance,
+      id,
+      response
+    }),
+    [ActionName.FollowAction]: extractFollowAction(response, actionOptions, id),
+    [ActionName.PreviewAction]: extractPreviewClientAction({
+      actionOptions,
+      appearance,
+      fireEvent,
+      id,
+      origin,
+      response
+    }),
+    [ActionName.AutomationAction]: extractAutomationAction(response),
+    [InternalActionName.AISummaryAction]: extractAISummaryAction(response, url, actionOptions, aiSummaryConfig),
+    ...(fg('platform-smart-card-view-related-urls-action') ? {
+      [InternalActionName.ViewRelatedLinksAction]: extractViewRelatedLinksAction(response)
+    } : {})
+  };
+  return Object.values(action).some(value => Boolean(value)) ? action : undefined;
+};
+
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ * Replaced with extractFlexibleCardActions()
+ */
 const extractActions = (response, url, actionOptions, id, aiSummaryConfig) => {
   const data = response.data;
   const action = {

package/dist/es2019/extractors/flexible/extract-state.js

@@ -1,7 +1,9 @@
 import { extractLink } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getExtensionKey } from '../../state/helpers';
 import { canShowAction } from '../../utils/actions/can-show-action';
 import { CardAction } from '../../view/Card/types';
+import { extractInvokePreviewAction } from '../action/extract-invoke-preview-action';
 import { extractLozenge } from '../common/lozenge';
 import { extractPreviewAction } from './actions/extract-preview-action';
 import extractServerAction from './extract-server-action';
@@ -18,7 +20,7 @@ const toInvokeRequest = (extensionKey, resourceIdentifiers, actionType, details)
     details
   };
 };
-const extractAction = (response, id) => {
+const extractAction = (response, id, actionOptions, appearance, origin, fireEvent, resolve) => {
   var _action$dataRetrieval, _action$dataUpdateAct;
   const extensionKey = getExtensionKey(response);
   const data = response === null || response === void 0 ? void 0 : response.data;
@@ -32,11 +34,21 @@ const extractAction = (response, id) => {
   }
   const read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
   const url = extractLink(data);
-  const previewData = response ? extractPreviewAction(response) : null;
+  const previewData = !fg('platform-smart-card-migrate-embed-modal-analytics') ? response ? extractPreviewAction(response) : null : undefined;
+  const invokePreviewAction = response && fg('platform-smart-card-migrate-embed-modal-analytics') ? extractInvokePreviewAction({
+    actionOptions,
+    appearance,
+    fireEvent,
+    id,
+    onClose: resolve ? () => url && resolve(url, true) : undefined,
+    origin,
+    response
+  }) : undefined;
   const details = {
     id,
     url,
-    previewData
+    previewData,
+    invokePreviewAction
   };
   const update = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name, details);
   return read || update ? {
@@ -44,7 +56,7 @@ const extractAction = (response, id) => {
     update
   } : undefined;
 };
-const extractState = (response, actionOptions, id) => {
+const extractState = (response, actionOptions, id, appearance, origin, fireEvent, resolve) => {
   if (!response || !response.data) {
     return;
   }
@@ -55,7 +67,7 @@ const extractState = (response, actionOptions, id) => {
   if (!canShowAction(CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
-  const action = extractAction(response, id);
+  const action = extractAction(response, id, actionOptions, appearance, origin, fireEvent, resolve);
   return {
     ...lozenge,
     action

package/dist/es2019/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractAri, extractDateCreated, extractDateUpdated, extractLink, extractPersonCreatedBy, extractPersonOwnedBy, extractTitle } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractSummary } from '../common/primitives';
-import extractActions from './actions';
-import { extractViewAction } from './actions/extract-view-action';
+import extractActions, { extractFlexibleCardActions } from './actions';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import extractPreview from './extract-preview';
 import extractPriority from './extract-priority';
@@ -11,8 +11,12 @@ import extractProviderIcon from './icon/extract-provider-icon';
 import { extractLatestCommit } from './latest-commit';
 import { extractAssignedTo, extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractDueOn, extractLocation, extractModifiedBy, extractOwnedBy, extractPersonAssignedToAsArray, extractProgrammingLanguage, extractReactCount, extractReadTime, extractSentOn, extractSourceBranch, extractStoryPoints, extractSubscriberCount, extractSubTasksProgress, extractTargetBranch, extractViewCount, extractVoteCount } from './utils';
 const extractFlexibleUiContext = ({
+  appearance,
+  fireEvent,
   id,
+  origin,
   renderers,
+  resolve,
   actionOptions,
   response,
   aiSummaryConfig,
@@ -24,8 +28,16 @@ const extractFlexibleUiContext = ({
   const data = response.data;
   const url = extractLink(data);
   return {
-    // Use the original URL in edge cases, such as short links for AI summary and copy link actions.
-    actions: extractActions(response, props.url, actionOptions, id, aiSummaryConfig),
+    actions: fg('platform-smart-card-migrate-embed-modal-analytics') ? extractFlexibleCardActions({
+      actionOptions,
+      aiSummaryConfig,
+      appearance,
+      fireEvent,
+      id,
+      origin,
+      response,
+      url: props.url // Use the original URL in edge cases, such as short links for AI summary and copy link actions.
+    }) : extractActions(response, props.url, actionOptions, id, aiSummaryConfig),
     assignedToGroup: extractPersonAssignedToAsArray(data),
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),
@@ -41,7 +53,6 @@ const extractFlexibleUiContext = ({
     assignedTo: extractAssignedTo(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
-    viewAction: extractViewAction(data, actionOptions),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     location: extractLocation(data),
@@ -56,7 +67,7 @@ const extractFlexibleUiContext = ({
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),
-    state: extractState(response, actionOptions, id),
+    state: extractState(response, actionOptions, id, appearance, origin, fireEvent, resolve),
     subscriberCount: extractSubscriberCount(data),
     subTasksProgress: extractSubTasksProgress(data),
     storyPoints: extractStoryPoints(data),

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

@@ -1,5 +1,7 @@
 import { useCallback } from 'react';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import * as measure from '../../../utils/performance';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
 const ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
@@ -8,51 +10,97 @@ const ACTION_EXPERIENCE_NAME = 'smart-link-action-invocation';
  * Invoke client action such as preview, download and open link
  */
 const useInvokeClientAction = ({
-  analytics
-}) => useCallback(async ({
-  actionType,
-  actionFn,
-  extensionKey,
-  display
+  analytics,
+  fireEvent: fireEventProp
 }) => {
-  const experienceId = uuid();
+  const {
+    fireEvent: defaultFireEvent
+  } = useAnalyticsEvents();
+  const fireEvent = fireEventProp !== null && fireEventProp !== void 0 ? fireEventProp : defaultFireEvent;
+  return useCallback(async ({
+    actionSubjectId,
+    actionType,
+    actionFn,
+    definitionId = null,
+    extensionKey,
+    display,
+    id,
+    resourceType = null
+  }) => {
+    const experienceId = uuid();
 
-  // Begin performance instrumentation.
-  const markName = `${experienceId}-${actionType}`;
-  measure.mark(markName, 'pending');
-  try {
-    // Begin UFO experience
-    startUfoExperience(ACTION_EXPERIENCE_NAME, experienceId, {
-      actionType,
-      display,
-      extensionKey,
-      invokeType: 'client'
-    });
+    // Begin performance instrumentation.
+    const markName = `${experienceId}-${actionType}`;
+    measure.mark(markName, 'pending');
+    try {
+      // Begin UFO experience
+      startUfoExperience(ACTION_EXPERIENCE_NAME, experienceId, {
+        actionType,
+        display,
+        extensionKey,
+        invokeType: 'client'
+      });
 
-    // Begin analytics instrumentation.
-    analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
-      actionType,
-      display
-    });
+      // Begin analytics instrumentation.
+      if (actionSubjectId && fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        fireEvent(`ui.button.clicked.${actionSubjectId}`, {
+          actionType: actionType !== null && actionType !== void 0 ? actionType : null,
+          definitionId,
+          display: display !== null && display !== void 0 ? display : null,
+          id: id !== null && id !== void 0 ? id : experienceId,
+          resourceType
+        });
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.actionClickedEvent({
+          actionType,
+          display
+        });
+      }
 
-    // Invoke action
-    const result = await actionFn();
-    measure.mark(markName, 'resolved');
-    succeedUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
-    analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
-      actionType,
-      display
-    });
-    return result;
-  } catch (err) {
-    measure.mark(markName, 'errored');
-    failUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
-    const reason = typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message;
-    analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
-      actionType,
-      display,
-      reason
-    });
-  }
-}, [analytics === null || analytics === void 0 ? void 0 : analytics.operational, analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
+      // Invoke action
+      const result = await actionFn();
+      measure.mark(markName, 'resolved');
+      succeedUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
+      if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        var _measure$getMeasure$d, _measure$getMeasure;
+        fireEvent('operational.smartLinkAction.resolved', {
+          actionType: actionType !== null && actionType !== void 0 ? actionType : null,
+          definitionId,
+          display: display !== null && display !== void 0 ? display : null,
+          duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(markName, 'resolved')) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null,
+          id: id !== null && id !== void 0 ? id : experienceId,
+          resourceType
+        });
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeSucceededEvent({
+          actionType,
+          display
+        });
+      }
+      return result;
+    } catch (err) {
+      measure.mark(markName, 'errored');
+      failUfoExperience(ACTION_EXPERIENCE_NAME, experienceId);
+      const reason = typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message;
+      if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        var _measure$getMeasure$d2, _measure$getMeasure2;
+        fireEvent('operational.smartLinkAction.unresolved', {
+          actionType: actionType !== null && actionType !== void 0 ? actionType : null,
+          definitionId,
+          display: display !== null && display !== void 0 ? display : null,
+          duration: (_measure$getMeasure$d2 = (_measure$getMeasure2 = measure.getMeasure(markName, 'errored')) === null || _measure$getMeasure2 === void 0 ? void 0 : _measure$getMeasure2.duration) !== null && _measure$getMeasure$d2 !== void 0 ? _measure$getMeasure$d2 : null,
+          id: id !== null && id !== void 0 ? id : experienceId,
+          reason,
+          resourceType
+        });
+      } else {
+        analytics === null || analytics === void 0 ? void 0 : analytics.operational.invokeFailedEvent({
+          actionType,
+          display,
+          reason
+        });
+      }
+    }
+  }, [analytics === null || analytics === void 0 ? void 0 : analytics.operational, analytics === null || analytics === void 0 ? void 0 : analytics.ui, fireEvent]);
+};
 export default useInvokeClientAction;

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -1,5 +1,10 @@
 import { useMemo } from 'react';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
+import { extractInvokeDownloadAction } from '../../extractors/action/extract-invoke-download-action';
+import { extractInvokePreviewAction } from '../../extractors/action/extract-invoke-preview-action';
+import { extractInvokeViewAction } from '../../extractors/action/extract-invoke-view-action';
 import { extractDownloadActionProps } from '../../extractors/action/extractDownloadActionProps';
 import { extractPreviewActionProps } from '../../extractors/action/extractPreviewActionProps';
 import { extractViewActionProps } from '../../extractors/action/extractViewActionProps';
@@ -18,6 +23,9 @@ export function useSmartLinkActions({
   const id = useMemo(() => uuid(), []);
   const linkState = useLinkState(url);
   const linkAnalytics = useLinkAnalytics(url, id);
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   const invokeClientAction = useInvokeClientAction({
     analytics: linkAnalytics
   });
@@ -32,15 +40,25 @@ export function useSmartLinkActions({
       actionOptions
     };
     const actions = [];
-    const downloadActionProps = extractDownloadActionProps(opts);
+    const invokeParam = {
+      actionOptions,
+      appearance,
+      id,
+      response: linkState.details
+    };
+    const downloadActionProps = fg('platform-smart-card-migrate-embed-modal-analytics') ? extractInvokeDownloadAction(invokeParam) : extractDownloadActionProps(opts);
     if (downloadActionProps) {
       actions.push(toAction(downloadActionProps, invokeClientAction, messages.download, 'download-content'));
     }
-    const viewActionProps = extractViewActionProps(opts);
+    const viewActionProps = fg('platform-smart-card-migrate-embed-modal-analytics') ? extractInvokeViewAction(invokeParam) : extractViewActionProps(opts);
     if (viewActionProps) {
       actions.push(toAction(viewActionProps, invokeClientAction, messages.view, 'view-content'));
     }
-    const previewActionProps = extractPreviewActionProps(opts);
+    const previewActionProps = fg('platform-smart-card-migrate-embed-modal-analytics') ? extractInvokePreviewAction({
+      ...invokeParam,
+      fireEvent,
+      origin
+    }) : extractPreviewActionProps(opts);
     if (previewActionProps) {
       actions.push(toAction(previewActionProps, invokeClientAction, messages.preview_improved, 'preview-content'));
     }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { context } from './analytics';
 /**
  * Provides an analytics context to supply attributes to events based on a URL
  */
@@ -14,6 +16,7 @@ export const LinkAnalyticsContext = ({
     data: {
       source,
       attributes: {
+        ...(fg('platform-smart-card-migrate-embed-modal-analytics') ? context : {}),
         displayCategory,
         display,
         id

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.7.0"
+  packageVersion: "32.7.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/utils/mocks.js

@@ -16,7 +16,10 @@ export const mockByUrl = url => {
       access: 'granted',
       auth: [],
       definitionId: 'd1',
-      key: 'object-provider'
+      key: 'object-provider',
+      resourceType: 'object-resource',
+      subproduct: 'object-subproduct',
+      product: 'object-product'
     },
     data: {
       '@context': {

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

@@ -48,6 +48,7 @@ const FlexibleResolvedView = ({
     onClick: onClick,
     onError: onError,
     onResolve: onResolve,
+    origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
     ui: FlexibleCardUiOptions,

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

@@ -26,6 +26,7 @@ const UnresolvedView = ({
   onAuthorize: onAuthorize,
   onClick: onClick,
   onError: onError,
+  origin: "smartLinkCard",
   testId: testId,
   ui: FlexibleCardUiOptions,
   url: url

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

@@ -196,6 +196,7 @@ function Component({
       cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
+      origin: "smartLinkCard",
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,

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

@@ -1,9 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { ActionName, CardDisplay } from '../../constants';
+import { ActionName, CardDisplay, SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { downloadUrl, getPreviewUrlWithTheme, openUrl } from '../../utils';
+import Icon from '../FlexibleCard/components/elements/icon';
 import withAnalytics from './components/analytics';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
@@ -15,11 +18,14 @@ const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MOD
 const EmbedModal = ({
   analytics,
   download,
+  invokeDownloadAction,
   extensionKey,
+  fireEvent,
   icon,
   iframeName,
   isSupportTheming,
   isTrusted = false,
+  linkIcon,
   onClose,
   onOpen,
   onResize,
@@ -29,14 +35,16 @@ const EmbedModal = ({
   src,
   testId = 'smart-embed-preview-modal',
   title,
-  url
+  url,
+  invokeViewAction
 }) => {
   const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
   const [width, setWidth] = useState(defaultWidth);
   const openAt = useRef();
   const invoke = useInvokeClientAction({
-    analytics
+    analytics,
+    fireEvent
   });
   const handleOnOpenComplete = useCallback(() => {
     openAt.current = Date.now();
@@ -68,21 +76,29 @@ const EmbedModal = ({
   const themeState = useThemeObserver();
   let previewUrl = src;
   const handleOnViewActionClick = useCallback(() => {
-    invoke({
-      actionType: 'ViewAction',
-      actionFn: async () => openUrl(url),
-      display: CardDisplay.EmbedPreview,
-      extensionKey
-    });
-  }, [extensionKey, invoke, url]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      invokeViewAction && invoke(invokeViewAction);
+    } else {
+      invoke({
+        actionType: 'ViewAction',
+        actionFn: async () => openUrl(url),
+        display: CardDisplay.EmbedPreview,
+        extensionKey
+      });
+    }
+  }, [extensionKey, invoke, url, invokeViewAction]);
   const handleOnDownloadActionClick = useCallback(() => {
-    invoke({
-      actionType: ActionName.DownloadAction,
-      actionFn: async () => downloadUrl(download),
-      display: CardDisplay.EmbedPreview,
-      extensionKey
-    });
-  }, [download, extensionKey, invoke]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      invokeDownloadAction && invoke(invokeDownloadAction);
+    } else {
+      invoke({
+        actionType: ActionName.DownloadAction,
+        actionFn: async () => downloadUrl(download),
+        display: CardDisplay.EmbedPreview,
+        extensionKey
+      });
+    }
+  }, [download, invokeDownloadAction, extensionKey, invoke]);
   if (previewUrl && isSupportTheming) {
     previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
@@ -94,10 +110,15 @@ const EmbedModal = ({
     testId: testId,
     width: width
   }, /*#__PURE__*/React.createElement(LinkInfo, {
-    icon: icon,
+    icon: fg('platform-smart-card-migrate-embed-modal-analytics') ? linkIcon ? {
+      icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+        size: SmartLinkSize.Large
+      })),
+      isFlexibleUi: true
+    } : undefined : icon,
     providerName: providerName,
-    onViewButtonClick: url ? handleOnViewActionClick : undefined,
-    onDownloadButtonClick: download ? handleOnDownloadActionClick : undefined,
+    onViewButtonClick: fg('platform-smart-card-migrate-embed-modal-analytics') ? invokeViewAction ? handleOnViewActionClick : undefined : url ? handleOnViewActionClick : undefined,
+    onDownloadButtonClick: fg('platform-smart-card-migrate-embed-modal-analytics') ? invokeDownloadAction ? handleOnDownloadActionClick : undefined : download ? handleOnDownloadActionClick : undefined,
     onResizeButtonClick: handleOnResizeClick,
     size: width,
     title: title,