@atlaskit/smart-card 26.34.0 → 26.34.2

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

@@ -1,18 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { CustomBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/glyph/lock';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
-import { extractRequestAccessContext } from '../../../../extractors/common/context';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
+import { FormattedMessage } from 'react-intl-next';
+import { forbiddenViewTitleStyle } from './styled';
+import extractHostname from '../../../../extractors/common/hostname/extractHostname';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -37,12 +40,25 @@ const FlexibleForbiddenView = ({
   const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
   const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
   const providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
-  const requestAccessContext = extractRequestAccessContext({
-    jsonLd: cardMetadata,
-    url,
-    context: providerName
-  });
+  const messageContext = useMemo(() => {
+    const hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
+    return {
+      product: providerName,
+      hostname
+    };
+  }, [providerName, url]);
+  const requestAccessContext = useMemo(() => {
+    return extractRequestAccessContextImproved({
+      jsonLd: cardMetadata,
+      url,
+      product: providerName
+    });
+  }, [cardMetadata, providerName, url]);
   const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  const {
+    titleMessageKey,
+    buttonDisabled
+  } = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {};
   const actions = useMemo(() => {
     let actionFromAccessContext = [];
     const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
@@ -51,10 +67,10 @@ const FlexibleForbiddenView = ({
         action,
         callToActionMessageKey
       } = requestAccessContext;
-      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
     }
     return [...tryAnotherAccountAction, ...actionFromAccessContext];
-  }, [onAuthorize, requestAccessContext, providerName]);
+  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -63,10 +79,19 @@ const FlexibleForbiddenView = ({
     onError: onError,
     testId: testId,
     ui: {
-      hideElevation: true
+      hideElevation: true,
+      size: SmartLinkSize.Medium
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+  }, titleMessageKey ? /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: forbiddenViewTitleStyle,
+    testId: `${testId}-title`
+  }, /*#__PURE__*/React.createElement("a", {
+    target: anchorTarget,
+    href: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: messageContext
+  })))) : /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
   }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
@@ -75,13 +100,15 @@ const FlexibleForbiddenView = ({
     primaryColor: `var(--ds-icon-danger, ${R300})`,
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 2,
     message: {
       descriptor: messages[descriptiveMessageKey],
-      values: {
-        context: providerName
-      }
+      values: messageContext
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  })), /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

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

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../../messages';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import BlockCardFooter from '../../components/flexible/footer';
+import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
+import Text from '../../../FlexibleCard/components/elements/text';
+import { getForbiddenJsonLd } from '../../../../utils/jsonld';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+const FlexibleForbiddenView = ({
+  anchorTarget,
+  cardState,
+  onAuthorize,
+  onClick,
+  onError,
+  testId = 'smart-block-forbidden-view',
+  url,
+  titleBlockProps
+}) => {
+  var _details$meta;
+  const status = cardState.status;
+  const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+  const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  const providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  const requestAccessContext = extractRequestAccessContext({
+    jsonLd: cardMetadata,
+    url,
+    context: providerName
+  });
+  const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  const actions = useMemo(() => {
+    let actionFromAccessContext = [];
+    const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
+    if (requestAccessContext) {
+      const {
+        action,
+        callToActionMessageKey
+      } = requestAccessContext;
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, {
+        context: providerName
+      })] : [];
+    }
+    return [...tryAnotherAccountAction, ...actionFromAccessContext];
+  }, [onAuthorize, requestAccessContext, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: {
+      hideElevation: true
+    },
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+    hideRetry: true,
+    anchorTarget: anchorTarget
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+    actions: actions,
+    status: status
+  })));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);

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

@@ -44,4 +44,7 @@ const refreshedFlexibleBlockCardStyle = css`
     border: 1px solid ${`var(--ds-border, ${N40})`};
   }
 `;
-export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export const forbiddenViewTitleStyle = css`
+  font-weight: 600;
+`;

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

@@ -17,6 +17,7 @@ import { EmbedCardUnauthorisedView } from './views/UnauthorisedView';
 import { EmbedCardErroredView } from './views/ErroredView';
 import ForbiddenView from './views/forbidden-view';
 import NotFoundView from './views/not-found-view';
+import UnauthorizedView from './views/unauthorized-view';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
   cardState: {
@@ -105,6 +106,19 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         });
       }
       const unauthorisedViewProps = extractEmbedProps(data, meta, platform);
+      if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
+        return /*#__PURE__*/React.createElement(UnauthorizedView, {
+          analytics: analytics,
+          context: unauthorisedViewProps.context,
+          extensionKey: extensionKey,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthorisedViewProps.link
+        });
+      }
       return /*#__PURE__*/React.createElement(EmbedCardUnauthorisedView, _extends({}, unauthorisedViewProps, {
         isSelected: isSelected,
         onAuthorise: handleAuthorize,
@@ -144,7 +158,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           context: forbiddenViewProps.context,
           inheritDimensions: inheritDimensions,
           isSelected: isSelected,
-          onAuthorise: handleAuthorize,
+          onAuthorize: handleAuthorize,
           onClick: handleFrameClick,
           accessContext: accessContext,
           url: forbiddenViewProps.link

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -5,6 +5,10 @@ import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 import { getUnresolvedEmbedCardImage } from '../utils';
+/**
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
+ * @deprecated Replaced by unauthorized-view
+ */
 export const EmbedCardUnauthorisedView = ({
   analytics,
   link,

package/dist/es2019/view/EmbedCard/views/forbidden-view/index.js

@@ -9,7 +9,7 @@ import UnresolvedView from '../unresolved-view';
 import { getUnresolvedEmbedCardImage } from '../../utils';
 const ForbiddenView = ({
   context,
-  onAuthorise,
+  onAuthorize,
   accessContext,
   testId = 'embed-card-forbidden-view',
   ...unresolvedViewProps
@@ -44,7 +44,7 @@ const ForbiddenView = ({
    */
   const button = useMemo(() => {
     var _action$promise;
-    const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorise;
+    const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorize;
     if (!onEmbedCardClick) {
       return null;
     }
@@ -56,7 +56,7 @@ const ForbiddenView = ({
     }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.try_another_account, callToActionMessageKey), {
       values: values
     })));
-  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
+  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorize, values]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
     image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('forbidden'),

package/dist/es2019/view/EmbedCard/views/unauthorized-view/index.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import Button from '@atlaskit/button';
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import { messages } from '../../../../messages';
+import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
+import { getUnresolvedEmbedCardImage } from '../../utils';
+import UnresolvedView from '../unresolved-view';
+const UnauthorizedView = ({
+  analytics,
+  context,
+  extensionKey,
+  onAuthorize,
+  testId = 'embed-card-unauthorized-view',
+  ...unresolvedViewProps
+}) => {
+  var _context$image;
+  const handleOnAuthorizeClick = useCallback(() => {
+    if (onAuthorize) {
+      analytics.track.appAccountAuthStarted({
+        extensionKey
+      });
+      onAuthorize();
+    }
+  }, [onAuthorize, analytics.track, extensionKey]);
+  const content = useMemo(() => {
+    if (onAuthorize) {
+      var _context$text;
+      // Our title and button messages always expect the product name to be present
+      // while the description support when product name is not present.
+      // To be looked at https://product-fabric.atlassian.net/browse/EDM-8173
+      const values = {
+        context: (_context$text = context === null || context === void 0 ? void 0 : context.text) !== null && _context$text !== void 0 ? _context$text : ''
+      };
+      if (values) {
+        // title: Connect your {context} account
+        // button: Connect to {context}
+        return {
+          title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+            values: values
+          })),
+          description: /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+            analytics: analytics,
+            providerName: context === null || context === void 0 ? void 0 : context.text,
+            testId: testId
+          }),
+          button: /*#__PURE__*/React.createElement(Button, {
+            testId: "connect-account",
+            appearance: "primary",
+            onClick: handleOnAuthorizeClick
+          }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+            values: values
+          })))
+        };
+      }
+    }
+    const values = context !== null && context !== void 0 && context.text ? {
+      context: context === null || context === void 0 ? void 0 : context.text
+    } : undefined;
+    if (values) {
+      // title: We can't display private pages from {context}
+      // description: You're trying to preview a link to a private {context} page. We recommend you review the URL or contact the page owner.
+      return {
+        title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unauthorised_account_name, {
+          values: values
+        })),
+        description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.unauthorised_account_description, {
+          values: values
+        }))
+      };
+    }
+
+    // title: We can't display private pages
+    // description: You're trying to preview a link to a private page. We recommend you review the URL or contact the page owner.
+    return {
+      title: /*#__PURE__*/React.createElement(FormattedMessage, messages.unauthorised_account_name_no_provider),
+      description: /*#__PURE__*/React.createElement(FormattedMessage, messages.unauthorised_account_description_no_provider)
+    };
+  }, [analytics, context === null || context === void 0 ? void 0 : context.text, handleOnAuthorizeClick, onAuthorize, testId]);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, content, {
+    icon: context === null || context === void 0 ? void 0 : context.icon,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : getUnresolvedEmbedCardImage('unauthorized'),
+    testId: testId,
+    text: context === null || context === void 0 ? void 0 : context.text
+  }));
+};
+export default UnauthorizedView;

package/dist/es2019/view/EmbedCard/views/unauthorized-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/HoverCard/components/views/forbidden/index.js

@@ -9,6 +9,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
+import extractHostname from '../../../../../extractors/common/hostname/extractHostname';
 const HoverCardForbiddenView = ({
   flexibleCardProps,
   testId = 'hover-card-forbidden-view'
@@ -21,7 +22,7 @@ const HoverCardForbiddenView = ({
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   const product = (_extractProvider$text = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  const hostname = /*#__PURE__*/React.createElement("b", null, new URL(url).hostname);
+  const hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
   const {
     action,
     descriptiveMessageKey,

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.34.0",
+  packageVersion: "26.34.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.34.0"
+  packageVersion: "26.34.2"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/mocks.js

@@ -16,6 +16,11 @@ export var mockContext = {
   atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
   schema: 'http://schema.org/'
 };
+export var mockGenerator = {
+  '@type': 'Application',
+  '@id': 'https://www.atlassian.com/#Jira',
+  name: 'Jira'
+};
 export var mockByUrl = function mockByUrl(url) {
   return {
     meta: {

package/dist/esm/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -12,15 +12,14 @@ import { messages } from '../../../../messages';
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-export var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
+export var ForbiddenAction = function ForbiddenAction(onClick, content, context, isDisabled) {
   return {
     name: ActionName.CustomAction,
     content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
-      values: {
-        context: context
-      }
+      values: context
     })),
     onClick: onClick,
-    testId: 'smart-action-connect-other-account'
+    testId: 'smart-action-connect-other-account',
+    isDisabled: isDisabled
   };
 };

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

@@ -20,8 +20,9 @@ import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
 import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
-import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -98,7 +99,9 @@ export var BlockCard = function BlockCard(_ref) {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : jsx(FlexibleForbiddenViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':

package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -2,18 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { CustomBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/glyph/lock';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
-import { extractRequestAccessContext } from '../../../../extractors/common/context';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
+import { FormattedMessage } from 'react-intl-next';
+import { forbiddenViewTitleStyle } from './styled';
+import extractHostname from '../../../../extractors/common/hostname/extractHostname';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -38,22 +41,34 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
   var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
   var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
-  var requestAccessContext = extractRequestAccessContext({
-    jsonLd: cardMetadata,
-    url: url,
-    context: providerName
-  });
+  var messageContext = useMemo(function () {
+    var hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
+    return {
+      product: providerName,
+      hostname: hostname
+    };
+  }, [providerName, url]);
+  var requestAccessContext = useMemo(function () {
+    return extractRequestAccessContextImproved({
+      jsonLd: cardMetadata,
+      url: url,
+      product: providerName
+    });
+  }, [cardMetadata, providerName, url]);
   var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  var _ref2 = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {},
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
   var actions = useMemo(function () {
     var actionFromAccessContext = [];
     var tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
     if (requestAccessContext) {
       var action = requestAccessContext.action,
         callToActionMessageKey = requestAccessContext.callToActionMessageKey;
-      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
     }
     return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
-  }, [onAuthorize, requestAccessContext, providerName]);
+  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -62,10 +77,19 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError: onError,
     testId: testId,
     ui: {
-      hideElevation: true
+      hideElevation: true,
+      size: SmartLinkSize.Medium
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+  }, titleMessageKey ? /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: forbiddenViewTitleStyle,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/React.createElement("a", {
+    target: anchorTarget,
+    href: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: messageContext
+  })))) : /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
   }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
@@ -74,13 +98,15 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 2,
     message: {
       descriptor: messages[descriptiveMessageKey],
-      values: {
-        context: providerName
-      }
+      values: messageContext
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  })), /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));