@atlaskit/smart-card 43.11.3 → 43.12.0

package/dist/cjs/view/EmbedCard/components/IframeDwellTracker.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.IframeDwellTracker = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -52,11 +53,31 @@ var IframeDwellTracker = exports.IframeDwellTracker = function IframeDwellTracke
         };
       });
     };
-    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
-      if (dwellTimeoutId.current) {
-        clearInterval(dwellTimeoutId.current);
+
+    // Require: iframe loaded, mouse over, and >75% visible
+    var isDwellAndHoverMetricsEnabled = (0, _platformFeatureFlags.fg)('rovo_chat_embed_card_dwell_and_hover_metrics');
+    if (isDwellAndHoverMetricsEnabled) {
+      // Note: Removed isWindowFocused requirement as it's unreliable and prevents tracking
+      // The mouse over check is sufficient to indicate user engagement
+      var shouldTrack = isIframeLoaded && isMouseOver && iframePercentVisible > 0.75;
+      if (shouldTrack) {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+        }
+        dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
+      } else {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+          dwellTimeoutId.current = undefined;
+        }
+      }
+    } else {
+      if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+        }
+        dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
       }
-      dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
     }
     return function () {
       if (dwellTimeoutId.current) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmbedCard = void 0;
+exports.EmbedCardUpdated = exports.EmbedCard = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -232,4 +232,207 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
         isSelected: isSelected
       });
   }
+});
+var EmbedCardUpdated = exports.EmbedCardUpdated = /*#__PURE__*/_react.default.forwardRef(function (_ref3, iframeRef) {
+  var _details$meta4, _forbiddenViewProps$c3, _forbiddenViewProps$c4, _notFoundViewProps$co3, _notFoundViewProps$co4;
+  var url = _ref3.url,
+    cardState = _ref3.cardState,
+    handleAuthorize = _ref3.handleAuthorize,
+    handleErrorRetry = _ref3.handleErrorRetry,
+    handleFrameClick = _ref3.handleFrameClick,
+    isSelected = _ref3.isSelected,
+    frameStyle = _ref3.frameStyle,
+    platform = _ref3.platform,
+    onResolve = _ref3.onResolve,
+    onError = _ref3.onError,
+    testId = _ref3.testId,
+    inheritDimensions = _ref3.inheritDimensions,
+    onIframeDwell = _ref3.onIframeDwell,
+    onIframeFocus = _ref3.onIframeFocus,
+    onIframeMouseEnter = _ref3.onIframeMouseEnter,
+    onIframeMouseLeave = _ref3.onIframeMouseLeave,
+    iframeUrlType = _ref3.iframeUrlType,
+    actionOptions = _ref3.actionOptions,
+    renderers = _ref3.renderers,
+    CompetitorPrompt = _ref3.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref3.hideIconLoadingSkeleton;
+  var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var status = cardState.status,
+    details = cardState.details;
+  var extensionKey = (0, _helpers.getExtensionKey)(details);
+  var isProductIntegrationSupported = (0, _helpers.hasAuthScopeOverrides)(details);
+  var _useControlDataExport3 = (0, _useControlDataExportConfig.useControlDataExportConfig)(),
+    _useControlDataExport4 = _useControlDataExport3.shouldControlDataExport,
+    shouldControlDataExport = _useControlDataExport4 === void 0 ? false : _useControlDataExport4;
+  switch (status) {
+    case 'pending':
+    case 'resolving':
+      return /*#__PURE__*/_react.default.createElement(UFOLoadHoldWrapper, null, /*#__PURE__*/_react.default.createElement(_ResolvedView.default, {
+        url: url,
+        cardState: cardState,
+        onClick: handleFrameClick,
+        onError: onError,
+        onResolve: onResolve,
+        renderers: renderers,
+        actionOptions: actionOptions,
+        testId: testId ? "".concat(testId, "-resolving-view") : 'embed-card-resolving-view'
+      }));
+    case 'resolved':
+      var resolvedViewProps = (0, _embed.extractEmbedProps)(details, platform, iframeUrlType);
+      if (onResolve) {
+        var _resolvedViewProps$pr2, _details$meta3;
+        onResolve(_objectSpread({
+          title: resolvedViewProps.title,
+          url: url,
+          aspectRatio: (_resolvedViewProps$pr2 = resolvedViewProps.preview) === null || _resolvedViewProps$pr2 === void 0 ? void 0 : _resolvedViewProps$pr2.aspectRatio
+        }, (0, _platformFeatureFlags.fg)('expose-product-details-from-smart-card') && {
+          extensionKey: details === null || details === void 0 || (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.key
+        }));
+      }
+      if ((0, _shouldDataExport.getIsDataExportEnabled)(shouldControlDataExport, cardState.details)) {
+        var unauthViewProps = (0, _embed.extractEmbedProps)(details, platform);
+        return /*#__PURE__*/_react.default.createElement(_unauthorizedView.default, {
+          context: unauthViewProps.context,
+          extensionKey: extensionKey,
+          frameStyle: frameStyle,
+          isProductIntegrationSupported: isProductIntegrationSupported,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthViewProps.link
+        });
+      }
+      if (resolvedViewProps.preview) {
+        return /*#__PURE__*/_react.default.createElement(_ResolvedView3.EmbedCardResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
+          isSelected: isSelected,
+          frameStyle: frameStyle,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus,
+          onIframeMouseEnter: onIframeMouseEnter,
+          onIframeMouseLeave: onIframeMouseLeave,
+          testId: testId,
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton,
+          extensionKey: extensionKey
+        }));
+      } else {
+        if (platform === 'mobile') {
+          var resolvedInlineViewProps = (0, _inline.extractInlineProps)(details);
+          return /*#__PURE__*/_react.default.createElement(_ResolvedView2.InlineCardResolvedView, (0, _extends2.default)({}, resolvedInlineViewProps, {
+            isSelected: isSelected,
+            testId: testId,
+            onClick: handleFrameClick
+          }));
+        }
+        return /*#__PURE__*/_react.default.createElement(_ResolvedView.default, {
+          url: url,
+          cardState: cardState,
+          onClick: handleFrameClick,
+          onError: onError,
+          onResolve: onResolve,
+          renderers: renderers,
+          actionOptions: actionOptions,
+          testId: testId
+        });
+      }
+    case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var unauthorisedViewProps = (0, _embed.extractEmbedProps)(details, platform);
+      return /*#__PURE__*/_react.default.createElement(_unauthorizedView.default, {
+        context: unauthorisedViewProps.context,
+        extensionKey: extensionKey,
+        frameStyle: frameStyle,
+        isProductIntegrationSupported: isProductIntegrationSupported,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        testId: testId,
+        url: unauthorisedViewProps.link
+      });
+    case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var forbiddenViewProps = (0, _embed.extractEmbedProps)(details, platform);
+      var cardMetadata = (_details$meta4 = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta4 !== void 0 ? _details$meta4 : (0, _jsonld.getForbiddenJsonLd)().meta;
+      if (forbiddenViewProps.preview) {
+        return /*#__PURE__*/_react.default.createElement(_ResolvedView3.EmbedCardResolvedView, (0, _extends2.default)({}, forbiddenViewProps, {
+          title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
+          isSelected: isSelected,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          extensionKey: extensionKey
+        }));
+      }
+      var forbiddenAccessContext = (0, _extractAccessContext.extractRequestAccessContextImproved)({
+        jsonLd: cardMetadata,
+        url: url,
+        product: (_forbiddenViewProps$c3 = (_forbiddenViewProps$c4 = forbiddenViewProps.context) === null || _forbiddenViewProps$c4 === void 0 ? void 0 : _forbiddenViewProps$c4.text) !== null && _forbiddenViewProps$c3 !== void 0 ? _forbiddenViewProps$c3 : '',
+        createAnalyticsEvent: createAnalyticsEvent
+      });
+      return /*#__PURE__*/_react.default.createElement(_forbiddenView.default, {
+        context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        accessContext: forbiddenAccessContext,
+        url: forbiddenViewProps.link
+      });
+    case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var notFoundViewProps = (0, _embed.extractEmbedProps)(details, platform);
+      var notFoundAccessContext = details !== null && details !== void 0 && details.meta ? (0, _extractAccessContext.extractRequestAccessContextImproved)({
+        jsonLd: details === null || details === void 0 ? void 0 : details.meta,
+        url: url,
+        product: (_notFoundViewProps$co3 = (_notFoundViewProps$co4 = notFoundViewProps.context) === null || _notFoundViewProps$co4 === void 0 ? void 0 : _notFoundViewProps$co4.text) !== null && _notFoundViewProps$co3 !== void 0 ? _notFoundViewProps$co3 : '',
+        createAnalyticsEvent: createAnalyticsEvent
+      }) : undefined;
+      return /*#__PURE__*/_react.default.createElement(_notFoundView.default, {
+        context: notFoundViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        accessContext: notFoundAccessContext,
+        url: notFoundViewProps.link
+      });
+    case 'fallback':
+    case 'errored':
+    default:
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_ErroredView.EmbedCardErroredView, {
+        onRetry: handleErrorRetry,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected
+      });
+  }
 });

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbedCardResolvedView = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _tokens = require("@atlaskit/tokens");
 var _utils = require("../../../utils");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _Frame = require("../components/Frame");
 var _ImageIcon = require("../components/ImageIcon");
 var _useEmbedResolvePostMessageListener = require("../useEmbedResolvePostMessageListener");
-var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
+var FrameComponent = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', _Frame.FrameUpdated, _Frame.Frame);
+var EmbedCardResolvedViewOld = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
     onClick = _ref.onClick,
@@ -84,4 +87,94 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     title: text,
     extensionKey: extensionKey
   }));
-});
+});
+var EmbedCardResolvedViewUpdated = /*#__PURE__*/_react.default.forwardRef(function (_ref2, embedIframeRef) {
+  var link = _ref2.link,
+    context = _ref2.context,
+    onClick = _ref2.onClick,
+    isSelected = _ref2.isSelected,
+    frameStyle = _ref2.frameStyle,
+    preview = _ref2.preview,
+    title = _ref2.title,
+    isTrusted = _ref2.isTrusted,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'embed-card-resolved-view' : _ref2$testId,
+    inheritDimensions = _ref2.inheritDimensions,
+    onIframeDwell = _ref2.onIframeDwell,
+    onIframeFocus = _ref2.onIframeFocus,
+    onIframeMouseEnter = _ref2.onIframeMouseEnter,
+    onIframeMouseLeave = _ref2.onIframeMouseLeave,
+    isSupportTheming = _ref2.isSupportTheming,
+    type = _ref2.type,
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton,
+    extensionKey = _ref2.extensionKey;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  var text = title || (context === null || context === void 0 ? void 0 : context.text);
+  var linkGlyph = _react.default.useMemo(function () {
+    return /*#__PURE__*/_react.default.createElement(_link.default, {
+      label: "icon",
+      LEGACY_size: "small",
+      testId: "embed-card-fallback-icon",
+      color: "currentColor"
+    });
+  }, []);
+  var icon = _react.default.useMemo(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+    return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
+      src: src,
+      default: linkGlyph,
+      appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
+    });
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
+  (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({
+    url: link,
+    embedIframeRef: embedIframeRef
+  });
+  var themeState = (0, _tokens.useThemeObserver)();
+  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming) {
+    previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
+  }
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isMouseOver = _React$useState2[0],
+    setMouseOver = _React$useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
+    isSelected: isSelected,
+    frameStyle: frameStyle,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions,
+    setOverflow: false,
+    CompetitorPrompt: CompetitorPrompt,
+    onContentMouseEnter: function onContentMouseEnter() {
+      setMouseOver(true);
+      onIframeMouseEnter === null || onIframeMouseEnter === void 0 || onIframeMouseEnter();
+    },
+    onContentMouseLeave: function onContentMouseLeave() {
+      setMouseOver(false);
+      onIframeMouseLeave === null || onIframeMouseLeave === void 0 || onIframeMouseLeave();
+    }
+  }, /*#__PURE__*/_react.default.createElement(FrameComponent, {
+    url: previewUrl,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus,
+    onIframeMouseEnter: onIframeMouseEnter,
+    onIframeMouseLeave: onIframeMouseLeave,
+    isMouseOver: isMouseOver,
+    title: text,
+    extensionKey: extensionKey
+  }));
+});
+var EmbedCardResolvedViewWithFG = exports.EmbedCardResolvedView = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardResolvedViewUpdated, EmbedCardResolvedViewOld);