@atlaskit/smart-card 43.30.1 → 43.31.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 43.31.0
+
+### Minor Changes
+
+- [`78762fbea5fd4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/78762fbea5fd4) -
+  [ux] Show rovo-specific hover card for un-authenticated as part of
+  platform_sl_3p_preauth_better_hovercard experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 43.30.1
 
 ### Patch Changes

package/dist/cjs/__tests__/vr-tests/__snapshots__/hover-card/hover-card-unauthorised--default--platform-sl-3p-preauth-better-hovercard-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5bd2bf44f51ef4f4f937b41a6c83ac5896a79db1a5e180e7de8eed93453f22c
+size 42310

package/dist/cjs/messages.js

@@ -857,6 +857,66 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Uses AI. Verify Results.',
     description: 'Shown on a Rovo summary to indicate that the summary was generated by AI and should be verified by the user for accuracy.'
   },
+  rovo_unauthorised_title: {
+    id: 'fabric.linking.rovo_unauthorised.title',
+    defaultMessage: 'Get smarter workflows by connecting your {context} account',
+    description: 'Banner headline in Rovo unauthorised hover card header. {context} is the third-party provider name (e.g. Google).'
+  },
+  rovo_unauthorised_title_no_provider: {
+    id: 'fabric.linking.rovo_unauthorised.title_no_provider',
+    defaultMessage: 'Get smarter workflows by connecting your account',
+    description: 'Banner headline in Rovo unauthorised hover card header when the provider name is unknown.'
+  },
+  rovo_unauthorised_feature_document_summaries_title: {
+    id: 'fabric.linking.rovo_unauthorised.feature.document_summaries.title',
+    defaultMessage: 'Quick summaries',
+    description: 'Feature title in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_document_summaries_desc: {
+    id: 'fabric.linking.rovo_unauthorised.feature.document_summaries.desc',
+    defaultMessage: 'Understand long docs in seconds',
+    description: 'Feature description in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_smart_suggestions_title: {
+    id: 'fabric.linking.rovo_unauthorised.feature.smart_suggestions.title',
+    defaultMessage: 'Smart suggestions',
+    description: 'Feature title in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_smart_suggestions_desc: {
+    id: 'fabric.linking.rovo_unauthorised.feature.smart_suggestions.desc',
+    defaultMessage: 'Strengthen your drafts with actionable feedback',
+    description: 'Feature description in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_cross_reference_title: {
+    id: 'fabric.linking.rovo_unauthorised.feature.cross_reference.title',
+    defaultMessage: 'Tracked link mentions',
+    description: 'Feature title in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_cross_reference_desc: {
+    id: 'fabric.linking.rovo_unauthorised.feature.cross_reference.desc',
+    defaultMessage: 'Never miss where your work is referenced',
+    description: 'Feature description in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_related_content_title: {
+    id: 'fabric.linking.rovo_unauthorised.feature.related_content.title',
+    defaultMessage: 'Related content',
+    description: 'Feature title in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_feature_related_content_desc: {
+    id: 'fabric.linking.rovo_unauthorised.feature.related_content.desc',
+    defaultMessage: 'Find relevant work and why it matters',
+    description: 'Feature description in Rovo unauthorised view.'
+  },
+  rovo_unauthorised_connect_account: {
+    id: 'fabric.linking.rovo_unauthorised.connect_account',
+    defaultMessage: 'Connect',
+    description: 'Primary action button in Rovo unauthorised hover card.'
+  },
+  rovo_unauthorised_not_now: {
+    id: 'fabric.linking.rovo_unauthorised.not_now',
+    defaultMessage: 'Maybe later',
+    description: 'Secondary action in Rovo unauthorised hover card.'
+  },
   rovo_prompt_context_generic: {
     id: 'fabric.linking.rovo_prompt_context_confluence_page.non-final',
     defaultMessage: 'page',

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.30.0"
+  packageVersion: "43.30.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/HoverCard/components/ContentContainer.compiled.css

@@ -2,7 +2,8 @@
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._189eidpf{border-width:0}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._1bsby0ve{width:var(--_1rzblqv)}
+._1bsb1f23{width:25rem}
+._1bsbiolt{width:22rem}
 ._9spsglyw .smart-link-loading-placeholder{display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._vchhusvi{box-sizing:border-box}

package/dist/cjs/view/HoverCard/components/ContentContainer.js

@@ -18,14 +18,17 @@ var _reactMagneticDi = require("react-magnetic-di");
 var _useAiSummaryAction = _interopRequireDefault(require("../../../state/hooks/use-ai-summary-action"));
 var _aiPrism = _interopRequireDefault(require("../../common/ai-prism"));
 var _HoverCardContent = require("./HoverCardContent");
-var _excluded = ["children", "isAIEnabled", "testId", "url"],
-  _excluded2 = ["children", "isAIEnabled", "testId", "url"];
+var _excluded = ["children", "widthAppearance", "isAIEnabled", "testId", "url"],
+  _excluded2 = ["children", "widthAppearance", "isAIEnabled", "testId", "url"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var NEW_CARD_WIDTH_REM = 25;
 var HoverCardContainerStyle = null;
+var hoverCardShellWidthDefault = null;
+var hoverCardShellWidthSlim = null;
+var hoverCardShellHideLoadingPlaceholder = null;
 var popupContainerStyles = null;
 var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   var children = _ref.children,
+    widthAppearance = _ref.widthAppearance,
     _ref$isAIEnabled = _ref.isAIEnabled,
     isAIEnabled = _ref$isAIEnabled === void 0 ? false : _ref$isAIEnabled,
     testId = _ref.testId,
@@ -40,15 +43,12 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   (0, _react.useEffect)(function () {
     setShowPrism(status === 'loading');
   }, [status]);
+  var resolvedWidthAppearance = widthAppearance !== null && widthAppearance !== void 0 ? widthAppearance : 'default';
   var container = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_11q7glyw _189eidpf _vchhusvi _1bsby0ve _9spsglyw", !isAIEnabled && "_2rko1mok _bfhk1bhr _16qs130s", _HoverCardContent.hoverCardClassName]),
+    className: (0, _runtime.ax)(["_11q7glyw _189eidpf _vchhusvi", resolvedWidthAppearance === 'slim' ? "_1bsbiolt" : "_1bsb1f23", "_9spsglyw", !isAIEnabled && "_2rko1mok _bfhk1bhr _16qs130s", _HoverCardContent.hoverCardClassName]),
     "data-testid": testId
-  }, props, {
-    style: {
-      "--_1rzblqv": (0, _runtime.ix)("".concat(NEW_CARD_WIDTH_REM, "rem"))
-    }
-  }), children);
+  }, props), children);
   return isAIEnabled ? /*#__PURE__*/React.createElement(_aiPrism.default, {
     isVisible: showPrism,
     testId: "".concat(testId, "-prism")
@@ -56,12 +56,14 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
 };
 var ContentContainer = function ContentContainer(_ref2) {
   var children = _ref2.children,
+    widthAppearance = _ref2.widthAppearance,
     _ref2$isAIEnabled = _ref2.isAIEnabled,
     isAIEnabled = _ref2$isAIEnabled === void 0 ? false : _ref2$isAIEnabled,
     testId = _ref2.testId,
     url = _ref2.url,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(ConnectedAIPrismContainer, (0, _extends2.default)({
+    widthAppearance: widthAppearance,
     isAIEnabled: isAIEnabled,
     url: url,
     testId: testId

package/dist/cjs/view/HoverCard/components/CustomPopupContainer.js

@@ -32,7 +32,10 @@ var CustomPopupContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref
  * Factory function to create a CustomPopupContainer with a specific z-index
  */
 var createCustomPopupContainer = exports.createCustomPopupContainer = function createCustomPopupContainer(zIndex) {
-  return /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+  return /*#__PURE__*/_react.default.forwardRef(
+  // FIXME: ...props spreads all props to the div, including isReferenceHidden, which is not a valid prop for a div.
+  // Find another way but adding exceptions with _, __, ___ etc.
+  function (_ref2, ref) {
     var children = _ref2.children,
       _ = _ref2.shouldFitContainer,
       __ = _ref2.shouldRenderToParent,

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -219,6 +219,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       onMouseLeave: initHideCard,
       cardState: linkState,
       onActionClick: onActionClick,
+      onDismiss: hideCard,
       onResolve: update,
       renderers: renderers,
       actionOptions: actionOptions,
@@ -232,7 +233,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       id: id,
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/_react.default.createElement(_HoverCardContent.default, hoverCardContentProps));
-  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
+  }, [initShowCard, initHideCard, linkState, onActionClick, hideCard, renderers, actionOptions, url, id, hoverPreviewOptions]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === ' ') {
       e.preventDefault();

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

@@ -13,6 +13,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../constants");
@@ -30,24 +31,52 @@ var _forbidden = _interopRequireDefault(require("./views/forbidden"));
 var _resolved = _interopRequireDefault(require("./views/resolved"));
 var _resolving = _interopRequireDefault(require("./views/resolving"));
 var _unauthorised = _interopRequireDefault(require("./views/unauthorised"));
+var _RovoUnauthorisedView = _interopRequireDefault(require("./views/unauthorised/RovoUnauthorisedView"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var hoverCardClassName = exports.hoverCardClassName = 'smart-links-hover-preview';
-var HoverCardContent = function HoverCardContent(_ref) {
+var useIsResolvedView = function useIsResolvedView(_ref) {
+  var _hoverPreviewOptions$;
+  var cardState = _ref.cardState,
+    hoverPreviewOptions = _ref.hoverPreviewOptions;
+  return !(hoverPreviewOptions !== null && hoverPreviewOptions !== void 0 && (_hoverPreviewOptions$ = hoverPreviewOptions.render) !== null && _hoverPreviewOptions$ !== void 0 && _hoverPreviewOptions$.call(hoverPreviewOptions)) && cardState.status === 'resolved';
+};
+var useServices = function useServices(_ref2) {
+  var url = _ref2.url;
+  var linkState = (0, _store.useSmartCardState)(url);
+  var services = (0, _helpers.getServices)(linkState.details);
+  return services;
+};
+var useIsUnauthorisedView = function useIsUnauthorisedView(_ref3) {
+  var _hoverPreviewOptions$2;
+  var cardState = _ref3.cardState,
+    url = _ref3.url,
+    hoverPreviewOptions = _ref3.hoverPreviewOptions;
+  var services = useServices({
+    url: url
+  });
+  return !(hoverPreviewOptions !== null && hoverPreviewOptions !== void 0 && (_hoverPreviewOptions$2 = hoverPreviewOptions.render) !== null && _hoverPreviewOptions$2 !== void 0 && _hoverPreviewOptions$2.call(hoverPreviewOptions)) && cardState.status === 'unauthorized' && Boolean(services === null || services === void 0 ? void 0 : services.length);
+};
+var useIsShowPreauthBetterHovercard = function useIsShowPreauthBetterHovercard(props) {
+  var rovoConfig = (0, _useRovoConfig.default)();
+  return Boolean(useIsUnauthorisedView(props) && (rovoConfig === null || rovoConfig === void 0 ? void 0 : rovoConfig.isRovoEnabled) && (0, _expValEquals.expValEquals)('platform_sl_3p_preauth_better_hovercard', 'isEnabled', true));
+};
+var HoverCardContent = function HoverCardContent(_ref4) {
   var _linkState$status, _cardState$details;
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    cardState = _ref.cardState,
-    onActionClick = _ref.onActionClick,
-    onResolve = _ref.onResolve,
-    renderers = _ref.renderers,
-    url = _ref.url,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
-    actionOptions = _ref.actionOptions,
-    hoverPreviewOptions = _ref.hoverPreviewOptions,
-    showRovoResolvedView = _ref.showRovoResolvedView;
+  var _ref4$id = _ref4.id,
+    id = _ref4$id === void 0 ? '' : _ref4$id,
+    cardState = _ref4.cardState,
+    onActionClick = _ref4.onActionClick,
+    onResolve = _ref4.onResolve,
+    renderers = _ref4.renderers,
+    url = _ref4.url,
+    onMouseEnter = _ref4.onMouseEnter,
+    onMouseLeave = _ref4.onMouseLeave,
+    onDismiss = _ref4.onDismiss,
+    actionOptions = _ref4.actionOptions,
+    hoverPreviewOptions = _ref4.hoverPreviewOptions,
+    showRovoResolvedView = _ref4.showRovoResolvedView;
   var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
@@ -148,82 +177,186 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var onClickStopPropagation = (0, _react.useCallback)(function (e) {
     return e.stopPropagation();
   }, []);
-  var getCardView = function getCardView(cardState) {
-    var _hoverPreviewOptions$;
-    var overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 || (_hoverPreviewOptions$ = hoverPreviewOptions.render) === null || _hoverPreviewOptions$ === void 0 ? void 0 : _hoverPreviewOptions$.call(hoverPreviewOptions);
-    if (overrideView) {
-      return overrideView;
-    }
-    if (cardState.status === 'errored' && (0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view')) {
+  var useIsResolvedViewGated = (0, _platformFeatureFlagsReact.functionUnionWithCondition)(function () {
+    return (0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_better_hovercard_killswitch');
+  }, useIsResolvedView, function () {
+    return undefined;
+  });
+  var useIsUnauthorisedViewGated = (0, _platformFeatureFlagsReact.functionUnionWithCondition)(function () {
+    return (0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_better_hovercard_killswitch');
+  }, useIsUnauthorisedView, function () {
+    return undefined;
+  });
+  var useIsShowPreauthBetterHovercardGated = (0, _platformFeatureFlagsReact.functionUnionWithCondition)(function () {
+    return (0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_better_hovercard_killswitch');
+  }, useIsShowPreauthBetterHovercard, function () {
+    return undefined;
+  });
+  var isResolved = useIsResolvedViewGated({
+    cardState: cardState,
+    hoverPreviewOptions: hoverPreviewOptions
+  });
+  var isUnauthorised = useIsUnauthorisedViewGated({
+    cardState: cardState,
+    url: url,
+    hoverPreviewOptions: hoverPreviewOptions
+  });
+  var showPreauthBetterHovercard = useIsShowPreauthBetterHovercardGated({
+    cardState: cardState,
+    url: url,
+    hoverPreviewOptions: hoverPreviewOptions
+  });
+  if ((0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_better_hovercard_killswitch')) {
+    var cardView = function (_hoverPreviewOptions$3) {
+      var overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 || (_hoverPreviewOptions$3 = hoverPreviewOptions.render) === null || _hoverPreviewOptions$3 === void 0 ? void 0 : _hoverPreviewOptions$3.call(hoverPreviewOptions);
+      if (overrideView) {
+        return overrideView;
+      }
+      if (cardState.status === 'errored' && (0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view')) {
+        return null;
+      }
+      if ((0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
+        return /*#__PURE__*/_react.default.createElement(_resolving.default, {
+          flexibleCardProps: flexibleCardProps,
+          titleBlockProps: titleBlockProps
+        });
+      }
+      if (isUnauthorised) {
+        if (showPreauthBetterHovercard) {
+          return /*#__PURE__*/_react.default.createElement(_RovoUnauthorisedView.default, {
+            extensionKey: extensionKey,
+            id: id,
+            flexibleCardProps: flexibleCardProps,
+            onDismiss: onDismiss,
+            url: url
+          });
+        }
+        return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
+          extensionKey: extensionKey,
+          id: id,
+          flexibleCardProps: flexibleCardProps,
+          url: url
+        });
+      }
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
+        return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+      if (isResolved) {
+        return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_sl_3p_auth_rovo_action_kill_switch') ? {
+          actionOptions: actionOptions,
+          showRovoResolvedView: showRovoResolvedView
+        } : undefined, {
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        }));
+      }
       return null;
-    }
-    if ((0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
-      return /*#__PURE__*/_react.default.createElement(_resolving.default, {
-        flexibleCardProps: flexibleCardProps,
-        titleBlockProps: titleBlockProps
-      });
-    }
-    if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
-      return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
-        extensionKey: extensionKey,
-        id: id,
-        flexibleCardProps: flexibleCardProps,
-        url: url
-      });
-    }
-    if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
-      return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
-        flexibleCardProps: flexibleCardProps
-      });
-    }
-    if (cardState.status === 'resolved') {
-      return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_sl_3p_auth_rovo_action_kill_switch') ? {
-        actionOptions: actionOptions,
-        showRovoResolvedView: showRovoResolvedView
-      } : undefined, {
-        cardState: cardState,
-        extensionKey: extensionKey,
-        flexibleCardProps: flexibleCardProps,
-        isAISummaryEnabled: isAISummaryEnabled,
-        onActionClick: onActionClick,
-        titleBlockProps: titleBlockProps,
-        url: url
-      }));
-    }
-    return null;
-  };
-  var cardView = getCardView(cardState);
-  return cardView ? /*#__PURE__*/_react.default.createElement(_ContentContainer.default, {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClickStopPropagation,
-    isAIEnabled: isAISummaryEnabled,
-    url: url
-  }, cardView) : null;
+    }();
+    return cardView ? /*#__PURE__*/_react.default.createElement(_ContentContainer.default, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClickStopPropagation,
+      widthAppearance: showPreauthBetterHovercard ? 'slim' : undefined,
+      isAIEnabled: isAISummaryEnabled,
+      url: url
+    }, cardView) : null;
+  } else {
+    var getCardView = function getCardView(cardState) {
+      var _hoverPreviewOptions$4;
+      var overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 || (_hoverPreviewOptions$4 = hoverPreviewOptions.render) === null || _hoverPreviewOptions$4 === void 0 ? void 0 : _hoverPreviewOptions$4.call(hoverPreviewOptions);
+      if (overrideView) {
+        return overrideView;
+      }
+      if (cardState.status === 'errored' && (0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view')) {
+        return null;
+      }
+      if ((0, _platformFeatureFlags.fg)('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
+        return /*#__PURE__*/_react.default.createElement(_resolving.default, {
+          flexibleCardProps: flexibleCardProps,
+          titleBlockProps: titleBlockProps
+        });
+      }
+      if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
+        return /*#__PURE__*/_react.default.createElement(_unauthorised.default, {
+          extensionKey: extensionKey,
+          id: id,
+          flexibleCardProps: flexibleCardProps,
+          url: url
+        });
+      }
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
+        return /*#__PURE__*/_react.default.createElement(_forbidden.default, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+      if (cardState.status === 'resolved') {
+        return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_sl_3p_auth_rovo_action_kill_switch') ? {
+          actionOptions: actionOptions,
+          showRovoResolvedView: showRovoResolvedView
+        } : undefined, {
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        }));
+      }
+      return null;
+    };
+    var _cardView = getCardView(cardState);
+    return _cardView ? /*#__PURE__*/_react.default.createElement(_ContentContainer.default, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClickStopPropagation,
+      isAIEnabled: isAISummaryEnabled,
+      url: url
+    }, _cardView) : null;
+  }
 };
 var HoverCardContentWithViewVariant = function HoverCardContentWithViewVariant(props) {
-  var _props$cardState2, _props$cardState3;
+  var cardState = props.cardState,
+    actionOptions = props.actionOptions;
   var rovoConfig = (0, _useRovoConfig.default)();
+  var isResolved = useIsResolvedView(props);
+  var showPreauthBetterHovercard = useIsShowPreauthBetterHovercard(props);
   var showRovoResolvedView = (0, _react.useMemo)(function () {
-    var _props$cardState;
-    return (props === null || props === void 0 || (_props$cardState = props.cardState) === null || _props$cardState === void 0 ? void 0 : _props$cardState.status) === 'resolved' && (props === null || props === void 0 ? void 0 : props.cardState.details) && (0, _extractRovoChatAction.default)({
-      response: props === null || props === void 0 ? void 0 : props.cardState.details,
+    return isResolved && cardState.details && (0, _extractRovoChatAction.default)({
+      response: cardState.details,
       rovoConfig: rovoConfig,
-      actionOptions: props === null || props === void 0 ? void 0 : props.actionOptions
+      actionOptions: actionOptions
     }) !== undefined;
-  }, [props === null || props === void 0 ? void 0 : props.actionOptions, props === null || props === void 0 || (_props$cardState2 = props.cardState) === null || _props$cardState2 === void 0 ? void 0 : _props$cardState2.details, props === null || props === void 0 || (_props$cardState3 = props.cardState) === null || _props$cardState3 === void 0 ? void 0 : _props$cardState3.status, rovoConfig]);
+  }, [actionOptions, cardState.details, rovoConfig, isResolved]);
   var data = (0, _react.useMemo)(function () {
-    var viewVariant = showRovoResolvedView && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_sl_3p_auth_rovo_action', 'isEnabled', true) ? 'rovo-resolved-view' : 'default';
+    var viewVariant = 'default';
+    if (showRovoResolvedView && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_sl_3p_auth_rovo_action', 'isEnabled', true)) {
+      viewVariant = 'rovo-resolved-view';
+    } else if (showPreauthBetterHovercard) {
+      viewVariant = 'rovo-unauthorised-view';
+    }
     return {
       attributes: {
         viewVariant: viewVariant
       }
     };
-  }, [showRovoResolvedView]);
+  }, [showRovoResolvedView, showPreauthBetterHovercard]);
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: data
   }, /*#__PURE__*/_react.default.createElement(HoverCardContent, (0, _extends2.default)({}, props, {
     showRovoResolvedView: showRovoResolvedView
   })));
 };
-var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('platform_sl_3p_auth_rovo_action_kill_switch', HoverCardContentWithViewVariant, HoverCardContent);
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  // We need to read both of them to sutisfy some of the tests that expect both to be checked.
+  var flagA = (0, _platformFeatureFlags.fg)('platform_sl_3p_preauth_better_hovercard_killswitch');
+  var flagB = (0, _platformFeatureFlags.fg)('platform_sl_3p_auth_rovo_action_kill_switch');
+  return flagA || flagB;
+}, HoverCardContentWithViewVariant, HoverCardContent);

package/dist/cjs/view/HoverCard/components/views/unauthorised/RovoUnauthorisedView.compiled.css

@@ -0,0 +1,16 @@
+
+._zulputpp{gap:var(--ds-space-150,9pt)}._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._4cvr1h6o{align-items:center}
+._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._qrwq1mok{border-top-right-radius:var(--ds-radius-large,8px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}