@atlaskit/smart-card 19.1.21 → 19.1.24

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/smart-card
 
+## 19.1.24
+
+### Patch Changes
+
+- [`cd729a0a41b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd729a0a41b) - [ux][ed-15030] Set the background color of smart cards properly in dark mode
+
+## 19.1.23
+
+### Patch Changes
+
+- [`f538640e3a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f538640e3a5) - fix: Previously the .reload() action would not propagate changes through to the smart-card state in some scenarios. This has been amended by making it an explicit Redux action.
+- Updated dependencies
+
+## 19.1.22
+
+### Patch Changes
+
+- [`c6978e3a40c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6978e3a40c) - This update adds Destination product and subproduct (core, servicedesk, software, etc.) analytics now available in the Smart Link ui card clicked event. At the time of writing, only Jira links have this functionality.
+
 ## 19.1.21
 
 ### Patch Changes

package/dist/cjs/state/actions/index.js

@@ -92,6 +92,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     }
   }, [hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = (0, _react.useCallback)(function (resourceUrl, response) {
+    var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? (0, _helpers.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -108,9 +109,15 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch((0, _linkingCommon.cardAction)(_linkingCommon.ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   var resolve = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var resourceUrl,
@@ -129,7 +136,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
             }).catch(function (error) {
               return handleResolvedLinkError(resourceUrl, error);
             }));

package/dist/cjs/state/analytics/useSmartLinkAnalytics.js

@@ -36,6 +36,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
   var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
   var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
   var extractedResourceType = (0, _helpers.getResourceType)(state.details);
+  var extractedSubproduct = (0, _helpers.getSubproduct)(state.details);
+  var extractedProduct = (0, _helpers.getProduct)(state.details);
   /** Contains all ui analytics events */
 
   var ui = (0, _react.useMemo)(function () {
@@ -72,6 +74,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
        * This fires an event that represents when a user clicks on a Smart Link.
        * @param id The unique ID for this Smart Link.
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -87,8 +90,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
         var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
-        var destinationProduct = arguments.length > 7 ? arguments[7] : undefined;
-        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct));
+        var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
+        var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
       },
 
       /**
@@ -198,7 +202,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
         return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
-  }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   var operational = (0, _react.useMemo)(function () {

package/dist/cjs/state/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getStatus = exports.getServices = exports.getResourceType = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
+exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getSubproduct = exports.getStatus = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
 
 var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
 
@@ -32,23 +32,45 @@ var getClickUrl = function getClickUrl(url, jsonLd) {
 exports.getClickUrl = getClickUrl;
 
 var getDefinitionId = function getDefinitionId(details) {
-  return details && details.meta && details.meta.definitionId;
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
 };
 
 exports.getDefinitionId = getDefinitionId;
 
 var getExtensionKey = function getExtensionKey(details) {
-  return details && details.meta && details.meta.key;
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
 };
 
 exports.getExtensionKey = getExtensionKey;
 
 var getResourceType = function getResourceType(details) {
-  return details && details.meta && details.meta.resourceType;
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
 };
 
 exports.getResourceType = getResourceType;
 
+var getProduct = function getProduct(details) {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+
+exports.getProduct = getProduct;
+
+var getSubproduct = function getSubproduct(details) {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
+};
+
+exports.getSubproduct = getSubproduct;
+
 var getServices = function getServices(details) {
   return details && details.meta.auth || [];
 };

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

@@ -235,7 +235,7 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
 
 exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
 
-var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
+var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -249,7 +249,8 @@ var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, defini
       display: display,
       isModifierKeyPressed: isModifierKeyPressed,
       location: location,
-      destinationProduct: destinationProduct
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
     })
   };
 };

package/dist/cjs/version.json

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

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

@@ -68,6 +68,8 @@ function CardWithUrlContent(_ref) {
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
   var resourceType = (0, _helpers.getResourceType)(state.details);
+  var product = (0, _helpers.getProduct)(state.details);
+  var subproduct = (0, _helpers.getSubproduct)(state.details);
   var services = (0, _helpers.getServices)(state.details);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
@@ -79,14 +81,14 @@ function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -78,7 +78,7 @@ var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _tagge
 }), function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({
     light: (0, _tokens.token)('elevation.surface.raised', 'white'),
-    dark: (0, _tokens.token)('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+    dark: (0, _tokens.token)('elevation.surface.raised', BACKGROUND_COLOR_DARK)
   });
 }, function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({

package/dist/es2019/state/actions/index.js

@@ -2,7 +2,7 @@ import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
 import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
 import * as measure from '../../utils/performance';
@@ -65,7 +65,7 @@ export const useSmartCardActions = (id, url, analytics) => {
       }
     }
   }, [hasData, status, dispatch, details]);
-  const handleResolvedLinkResponse = useCallback((resourceUrl, response) => {
+  const handleResolvedLinkResponse = useCallback((resourceUrl, response, isReloading = false) => {
     const hostname = new URL(resourceUrl).hostname;
     const nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -82,16 +82,22 @@ export const useSmartCardActions = (id, url, analytics) => {
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false) => {
     // Request JSON-LD data for the card from ORS, iff it has extended
     // its cache lifespan OR there is no data for it currently. Once the data
     // has come back asynchronously, dispatch the resolved action for the card.
     if (isReloading || !hasData) {
-      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response)).catch(error => handleResolvedLinkError(resourceUrl, error));
+      return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response, isReloading)).catch(error => handleResolvedLinkError(resourceUrl, error));
     } else {
       addMetadataToExperience('smart-link-rendered', id, {
         cached: true

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
+import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -24,6 +24,8 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
   const extractedDefinitionId = getDefinitionId(state.details);
   const extractedExtensionKey = getExtensionKey(state.details);
   const extractedResourceType = getResourceType(state.details);
+  const extractedSubproduct = getSubproduct(state.details);
+  const extractedProduct = getProduct(state.details);
   /** Contains all ui analytics events */
 
   const ui = useMemo(() => ({
@@ -51,6 +53,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * This fires an event that represents when a user clicks on a Smart Link.
      * @param id The unique ID for this Smart Link.
      * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
      * @param definitionId The definitionId of the Smart Link resolver invoked.
      * @param extensionKey The extensionKey of the Smart Link resovler invoked.
      * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -58,7 +61,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @param destinationProduct The product the Smart Link is linked to.
      * @returns
      */
-    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct)),
+    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct = extractedProduct, destinationSubproduct = extractedSubproduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct)),
 
     /**
      * This fires an event that represents when a user clicks on a Smart Link action.
@@ -141,7 +144,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
      * @returns
      */
     hoverCardDismissedEvent: (previewDisplay, hoverTime, previewInvokeMethod, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
-  }), [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }), [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   const operational = useMemo(() => ({

package/dist/es2019/state/helpers.js

@@ -19,9 +19,31 @@ export const getClickUrl = (url, jsonLd) => {
 
   return url;
 };
-export const getDefinitionId = details => details && details.meta && details.meta.definitionId;
-export const getExtensionKey = details => details && details.meta && details.meta.key;
-export const getResourceType = details => details && details.meta && details.meta.resourceType;
+export const getDefinitionId = details => {
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
+};
+export const getExtensionKey = details => {
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
+};
+export const getResourceType = details => {
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
+};
+export const getProduct = details => {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+export const getSubproduct = details => {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
+};
 export const getServices = details => details && details.meta.auth || [];
 export const hasResolved = details => details && isAccessible(details) && isVisible(details);
 export const isAccessible = ({

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

@@ -174,7 +174,7 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   actionSubjectId: 'titleGoToLink',
@@ -187,7 +187,8 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
     display,
     isModifierKeyPressed,
     location,
-    destinationProduct
+    destinationProduct,
+    destinationSubproduct
   }
 });
 export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
-import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
+import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
@@ -42,6 +42,8 @@ export function CardWithUrlContent({
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
+  const product = getProduct(state.details);
+  const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
 
@@ -51,14 +53,14 @@ export function CardWithUrlContent({
   }, [state.details, url]);
   const handleClickWrapper = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {
     actions.reload();

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -91,7 +91,7 @@ export const Wrapper = styled.a`
 })};
   background-color: ${props => props.withoutBackground ? '' : themed({
   light: token('elevation.surface.raised', 'white'),
-  dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+  dark: token('elevation.surface.raised', BACKGROUND_COLOR_DARK)
 })};
   ${props => props.withoutBackground ? '' : themed({
   light: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)};`,

package/dist/esm/state/actions/index.js

@@ -4,7 +4,7 @@ import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, cardAction } from '@atlaskit/linking-common';
+import { ACTION_PENDING, ACTION_RESOLVED, ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, cardAction } from '@atlaskit/linking-common';
 import { getDefinitionId, getByDefinitionId, getServices, getStatus, getExtensionKey } from '../helpers';
 import { ERROR_MESSAGE_OAUTH, ERROR_MESSAGE_FATAL } from './constants';
 import * as measure from '../../utils/performance';
@@ -67,6 +67,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     }
   }, [hasData, status, dispatch, details]);
   var handleResolvedLinkResponse = useCallback(function (resourceUrl, response) {
+    var isReloading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var hostname = new URL(resourceUrl).hostname;
     var nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
@@ -83,9 +84,15 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     } // Dispatch Analytics and resolved card action - including unauthorized states.
 
 
-    dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl
-    }, response));
+    if (isReloading) {
+      dispatch(cardAction(ACTION_RELOADING, {
+        url: resourceUrl
+      }, response));
+    } else {
+      dispatch(cardAction(ACTION_RESOLVED, {
+        url: resourceUrl
+      }, response));
+    }
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   var resolve = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var resourceUrl,
@@ -104,7 +111,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
             }
 
             return _context.abrupt("return", connections.client.fetchData(resourceUrl).then(function (response) {
-              return handleResolvedLinkResponse(resourceUrl, response);
+              return handleResolvedLinkResponse(resourceUrl, response, isReloading);
             }).catch(function (error) {
               return handleResolvedLinkError(resourceUrl, error);
             }));

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
+import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -24,6 +24,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
   var extractedDefinitionId = getDefinitionId(state.details);
   var extractedExtensionKey = getExtensionKey(state.details);
   var extractedResourceType = getResourceType(state.details);
+  var extractedSubproduct = getSubproduct(state.details);
+  var extractedProduct = getProduct(state.details);
   /** Contains all ui analytics events */
 
   var ui = useMemo(function () {
@@ -60,6 +62,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
        * This fires an event that represents when a user clicks on a Smart Link.
        * @param id The unique ID for this Smart Link.
        * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+       * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
        * @param definitionId The definitionId of the Smart Link resolver invoked.
        * @param extensionKey The extensionKey of the Smart Link resovler invoked.
        * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -75,8 +78,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
         var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
         var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
-        var destinationProduct = arguments.length > 7 ? arguments[7] : undefined;
-        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct));
+        var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
+        var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
+        return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
       },
 
       /**
@@ -186,7 +190,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
         return dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
-  }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
   /** Contains all operational analytics events */
 
   var operational = useMemo(function () {

package/dist/esm/state/helpers.js

@@ -18,13 +18,29 @@ export var getClickUrl = function getClickUrl(url, jsonLd) {
   return url;
 };
 export var getDefinitionId = function getDefinitionId(details) {
-  return details && details.meta && details.meta.definitionId;
+  var _details$meta;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
 };
 export var getExtensionKey = function getExtensionKey(details) {
-  return details && details.meta && details.meta.key;
+  var _details$meta2;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
 };
 export var getResourceType = function getResourceType(details) {
-  return details && details.meta && details.meta.resourceType;
+  var _details$meta3;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
+};
+export var getProduct = function getProduct(details) {
+  var _details$meta4;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
+};
+export var getSubproduct = function getSubproduct(details) {
+  var _details$meta5;
+
+  return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
 };
 export var getServices = function getServices(details) {
   return details && details.meta.auth || [];

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

@@ -187,7 +187,7 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(di
     })
   };
 };
-export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
+export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
@@ -201,7 +201,8 @@ export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status,
       display: display,
       isModifierKeyPressed: isModifierKeyPressed,
       location: location,
-      destinationProduct: destinationProduct
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
     })
   };
 };

package/dist/esm/version.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
-import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
+import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
@@ -42,6 +42,8 @@ export function CardWithUrlContent(_ref) {
   var definitionId = getDefinitionId(state.details);
   var extensionKey = getExtensionKey(state.details);
   var resourceType = getResourceType(state.details);
+  var product = getProduct(state.details);
+  var subproduct = getSubproduct(state.details);
   var services = getServices(state.details);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children);
@@ -53,14 +55,14 @@ export function CardWithUrlContent(_ref) {
   }, [state.details, url]);
   var handleClickWrapper = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
-    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -63,7 +63,7 @@ export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTempl
 }), function (props) {
   return props.withoutBackground ? '' : themed({
     light: token('elevation.surface.raised', 'white'),
-    dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
+    dark: token('elevation.surface.raised', BACKGROUND_COLOR_DARK)
   });
 }, function (props) {
   return props.withoutBackground ? '' : themed({

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -3,6 +3,7 @@ import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
 import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
 import { InvokeType } from '../../model/invoke-opts';
+import { DestinationProduct, DestinationSubproduct } from '../../utils/analytics/types';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
@@ -36,6 +37,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * This fires an event that represents when a user clicks on a Smart Link.
          * @param id The unique ID for this Smart Link.
          * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+         * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
          * @param definitionId The definitionId of the Smart Link resolver invoked.
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
@@ -43,7 +45,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
          */
-        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
+        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined) => void;
         /**
          * This fires an event that represents when a user clicks on a Smart Link action.
          * Note: This also starts the UFO smart-link-action-invocation experience.

package/dist/types/state/helpers.d.ts

@@ -1,10 +1,13 @@
 import { JsonLd } from 'json-ld-types';
 import { CardType, CardStore } from '@atlaskit/linking-common';
+import { DestinationProduct, DestinationSubproduct } from '../utils/analytics/types';
 export declare const getByDefinitionId: (definitionId: string | undefined, store: CardStore) => string[];
 export declare const getClickUrl: (url: string, jsonLd?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string;
 export declare const getDefinitionId: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
 export declare const getExtensionKey: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
 export declare const getResourceType: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
+export declare const getProduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationProduct | string | undefined;
+export declare const getSubproduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationSubproduct | string | undefined;
 export declare const getServices: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => JsonLd.Primitives.AuthService[];
 export declare const hasResolved: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => boolean | undefined;
 export declare const isAccessible: ({ meta: { access } }: JsonLd.Response) => boolean;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -12,7 +12,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         ui: {
             authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
             authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
+            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => void;
             actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
             hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
             closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;

package/dist/types/utils/analytics/analytics.d.ts

@@ -23,7 +23,7 @@ export declare const connectFailedEvent: (definitionId?: string | undefined, ext
 export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => AnalyticsPayload;
+export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => AnalyticsPayload;
 export declare const uiActionClickedEvent: (id: string, actionType: string, extensionKey?: string | undefined, display?: CardInnerAppearance | undefined) => AnalyticsPayload;
 export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
 export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;

package/dist/types/utils/analytics/types.d.ts

@@ -1 +1,2 @@
 export declare type DestinationProduct = 'jira' | 'confluence' | 'bitbucket' | 'trello';
+export declare type DestinationSubproduct = 'core' | 'software' | 'servicedesk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.1.21",
+  "version": "19.1.24",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/linking-common": "^1.1.0",
     "@atlaskit/logo": "^13.7.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.14.0",
+    "@atlaskit/media-common": "^2.15.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/popup": "^1.3.0",
@@ -58,7 +58,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.0.3",
+    "@atlaskit/link-provider": "^1.0.4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"