@atlaskit/smart-card 23.6.6 → 23.6.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.6.7
+
+### Patch Changes
+
+- [`9110a0daf0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9110a0daf0e) - [ux] Added support of different forbidden views for Block Card with Flexible UI
+
 ## 23.6.6
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.6",
+	"version": "23.6.7",
 	"sideEffects": false
 }

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ForbiddenAction = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -19,13 +21,19 @@ var _messages = require("../../../../messages");
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @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
  */
-var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
   return {
     name: _constants.ActionName.CustomAction,
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account),
-    onClick: onAuthorize
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[content], {
+      values: {
+        context: context
+      }
+    })),
+    onClick: onClick
   };
 };
 

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
@@ -31,6 +33,12 @@ var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
 
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
 
+var _jsonld = require("../../../../utils/jsonld");
+
+var _extractors = require("@atlaskit/linking-common/extractors");
+
+var _context = require("../../../../extractors/common/context");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -43,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see FlexibleCardProps
  */
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+
   var cardState = _ref.cardState,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
@@ -52,9 +62,28 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       ui = _ref.ui,
       url = _ref.url;
   var status = cardState.status;
+  var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
+  var provider = (0, _extractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
+  var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  var requestAccessContext = (0, _context.extractRequestAccessContext)({
+    jsonLd: cardMetadata,
+    url: url,
+    context: providerName
+  });
+  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
   var actions = (0, _react.useMemo)(function () {
-    return onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize)] : [];
-  }, [onAuthorize]);
+    var actionFromAccessContext = [];
+    var tryAnotherAccountAction = onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize, 'try_another_account')] : [];
+
+    if (requestAccessContext) {
+      var action = requestAccessContext.action,
+          callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, providerName)] : [];
+    }
+
+    return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -73,7 +102,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: {
-      descriptor: _messages.messages.invalid_permissions_description
+      descriptor: _messages.messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
     actions: actions,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.6",
+	"version": "23.6.7",
 	"sideEffects": false
 }

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { ActionName } from '../../../../constants';
@@ -6,11 +7,17 @@ import { messages } from '../../../../messages';
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @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 const ForbiddenAction = onAuthorize => ({
+export const ForbiddenAction = (onClick, content, context) => ({
   name: ActionName.CustomAction,
-  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
-  onClick: onAuthorize
+  content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
+    values: {
+      context
+    }
+  })),
+  onClick: onClick
 });

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

@@ -9,7 +9,9 @@ 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/linking-common/extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
 /**
  * This view represent a Block Card with the 'Forbidden' status.
  * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
@@ -17,6 +19,7 @@ import Text from '../../../FlexibleCard/components/elements/text';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 const FlexibleForbiddenView = ({
   cardState,
   onAuthorize,
@@ -26,8 +29,33 @@ const FlexibleForbiddenView = ({
   ui,
   url
 }) => {
+  var _details$meta;
+
   const status = cardState.status;
-  const actions = useMemo(() => onAuthorize ? [ForbiddenAction(onAuthorize)] : [], [onAuthorize]);
+  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, providerName)] : [];
+    }
+
+    return [...tryAnotherAccountAction, ...actionFromAccessContext];
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -46,7 +74,10 @@ const FlexibleForbiddenView = ({
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: {
-      descriptor: messages.invalid_permissions_description
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.6",
+	"version": "23.6.7",
 	"sideEffects": false
 }

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { ActionName } from '../../../../constants';
@@ -6,13 +7,19 @@ import { messages } from '../../../../messages';
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @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(onAuthorize) {
+export var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
   return {
     name: ActionName.CustomAction,
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
-    onClick: onAuthorize
+    content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
+      values: {
+        context: context
+      }
+    })),
+    onClick: onClick
   };
 };

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -9,7 +10,9 @@ 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/linking-common/extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
 /**
  * This view represent a Block Card with the 'Forbidden' status.
  * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
@@ -17,7 +20,10 @@ import Text from '../../../FlexibleCard/components/elements/text';
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
+
 var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+
   var cardState = _ref.cardState,
       onAuthorize = _ref.onAuthorize,
       onClick = _ref.onClick,
@@ -27,9 +33,28 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       ui = _ref.ui,
       url = _ref.url;
   var status = cardState.status;
+  var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  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 descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
   var actions = useMemo(function () {
-    return onAuthorize ? [ForbiddenAction(onAuthorize)] : [];
-  }, [onAuthorize]);
+    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)] : [];
+    }
+
+    return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -48,7 +73,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: {
-      descriptor: messages.invalid_permissions_description
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
     }
   })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,

package/dist/types/view/BlockCard/actions/flexible/ForbiddenAction.d.ts

@@ -1,8 +1,11 @@
 import { CustomActionItem } from '../../../FlexibleCard/components/blocks/types';
+import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
 /**
  * Returns a CustomActionItem with a "Try Another Account" default message
  *
  * @see CustomActionItem
- * @param onAuthorize a function that will be called on the click of the button
+ * @param onClick a function that will be called on the click of the button
+ * @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 declare const ForbiddenAction: (onAuthorize: () => void) => CustomActionItem;
+export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: string | undefined) => CustomActionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.6.6",
+  "version": "23.6.7",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"