@atlaskit/smart-card 44.7.0 → 44.7.1

package/dist/cjs/state/services/personalization/index.js

@@ -4,9 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PersonalizationService = exports.PERSONALIZATION_STORAGE_SCOPE = exports.PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX = void 0;
+exports.SOCIAL_PROOF_TRAIT_NAME = exports.PersonalizationService = exports.PERSONALIZATION_STORAGE_SCOPE = exports.PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX = exports.PERSONALIZATION_PROVIDER_PCT_TTL_MS = void 0;
 exports.getCachedProviderPctMapAndRefresh = getCachedProviderPctMapAndRefresh;
-exports.personalizationService = exports.getProviderPctMap = void 0;
+exports.getProviderPctMap = void 0;
+exports.getProviderPctMapSync = getProviderPctMapSync;
+exports.personalizationService = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -17,19 +19,17 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
 var _currentSiteCloudId = require("../current-site-cloud-id");
 var BASE_URL = '/gateway/api/tap-delivery/api/v3/personalization';
-
-/**
- * Logical key shape: `@atlaskit/smart-card:<feature>:<schema-version>:<scope>` (see smart-card
- * storage conventions). {@link StorageClient} narrows the localStorage key to
- * `<clientKey>_<itemKey>` with `clientKey === '@atlaskit/smart-card'` and
- * `itemKey === 'pct-map:v1:<cloudId>:<traitName>'` (scope segments URI-encoded).
- */
-var PERSONALIZATION_STORAGE_SCOPE = exports.PERSONALIZATION_STORAGE_SCOPE = '@atlaskit/smart-card';
+var PERSONALIZATION_STORAGE_SCOPE = exports.PERSONALIZATION_STORAGE_SCOPE = 'smart-card-social-proof';
 var PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX = exports.PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX = 'pct-map:v1:';
+var PERSONALIZATION_PROVIDER_PCT_TTL_MS = exports.PERSONALIZATION_PROVIDER_PCT_TTL_MS = 24 * 60 * 60 * 1000;
+var SOCIAL_PROOF_TRAIT_NAME = exports.SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
 var smartCardStorage = new _storageClient.StorageClient(PERSONALIZATION_STORAGE_SCOPE);
 
 /** Keys written by this service in localStorage when using {@link smartCardStorage}. */
 var LOCAL_STORAGE_ROW_KEY_PREFIX = "".concat(PERSONALIZATION_STORAGE_SCOPE, "_").concat(PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX);
+function scopedCacheKey(cloudId, traitName) {
+  return "".concat(cloudId, ":").concat(traitName);
+}
 function pctMapStorageItemKey(cloudId, traitName) {
   return "".concat(PERSONALIZATION_STORAGE_ITEM_KEY_PREFIX).concat(encodeURIComponent(cloudId), ":").concat(encodeURIComponent(traitName));
 }
@@ -81,53 +81,46 @@ var PersonalizationService = exports.PersonalizationService = /*#__PURE__*/funct
     (0, _defineProperty2.default)(this, "cache", new Map());
   }
   return (0, _createClass2.default)(PersonalizationService, [{
-    key: "getCachedProviderPctMapAndRefresh",
-    value:
-    /**
-     * Returns the currently cached provider percentage map synchronously and starts a background refresh.
-     * The refresh result is persisted for future calls but is not awaited by this call.
-     */
-    function getCachedProviderPctMapAndRefresh(traitName) {
-      var cloudId = (0, _currentSiteCloudId.getCachedCurrentSiteCloudIdAndRefresh)();
-      var fromStorage = cloudId && this.readStoredProviderPctMap(cloudId, traitName) || null;
-      void this.getProviderPctMap(traitName);
-      return fromStorage;
+    key: "getProviderPctMapSync",
+    value: /** Pure synchronous read for an explicit cloud id / trait pair. */
+    function getProviderPctMapSync(cloudId, traitName) {
+      if (!cloudId) {
+        return null;
+      }
+      return this.readStoredProviderPctMap(cloudId, traitName);
     }
   }, {
     key: "getProviderPctMap",
     value: function () {
-      var _getProviderPctMap = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(traitName) {
+      var _getProviderPctMap = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(cloudId, traitName) {
         var _this = this;
-        var cachedPromise, promise;
+        var cacheKey, cachedPromise, promise, retryablePromise;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              cachedPromise = this.cache.get(traitName);
+              if (cloudId) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return", undefined);
+            case 2:
+              cacheKey = scopedCacheKey(cloudId, traitName);
+              cachedPromise = this.cache.get(cacheKey);
               if (!cachedPromise) {
-                _context2.next = 3;
+                _context2.next = 6;
                 break;
               }
               return _context2.abrupt("return", cachedPromise);
-            case 3:
+            case 6:
               promise = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-                var cloudId, traits, trait, mapped;
+                var traits, trait, mapped;
                 return _regenerator.default.wrap(function _callee$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
                       _context.prev = 0;
                       _context.next = 3;
-                      return (0, _currentSiteCloudId.getCurrentSiteCloudId)();
-                    case 3:
-                      cloudId = _context.sent;
-                      if (cloudId) {
-                        _context.next = 6;
-                        break;
-                      }
-                      return _context.abrupt("return", undefined);
-                    case 6:
-                      _context.next = 8;
                       return fetchSiteTraits(cloudId);
-                    case 8:
+                    case 3:
                       traits = _context.sent;
                       trait = traits.find(function (t) {
                         return t.name === traitName;
@@ -137,25 +130,28 @@ var PersonalizationService = exports.PersonalizationService = /*#__PURE__*/funct
                         _this.writeStoredProviderPctMap(cloudId, traitName, mapped);
                       }
                       return _context.abrupt("return", mapped);
-                    case 15:
-                      _context.prev = 15;
+                    case 10:
+                      _context.prev = 10;
                       _context.t0 = _context["catch"](0);
                       return _context.abrupt("return", undefined);
-                    case 18:
+                    case 13:
                     case "end":
                       return _context.stop();
                   }
-                }, _callee, null, [[0, 15]]);
+                }, _callee, null, [[0, 10]]);
               }))();
-              this.cache.set(traitName, promise);
-              return _context2.abrupt("return", promise);
-            case 6:
+              retryablePromise = promise.finally(function () {
+                _this.cache.delete(cacheKey);
+              });
+              this.cache.set(cacheKey, retryablePromise);
+              return _context2.abrupt("return", retryablePromise);
+            case 10:
             case "end":
               return _context2.stop();
           }
         }, _callee2, this);
       }));
-      function getProviderPctMap(_x2) {
+      function getProviderPctMap(_x2, _x3) {
         return _getProviderPctMap.apply(this, arguments);
       }
       return getProviderPctMap;
@@ -177,7 +173,7 @@ var PersonalizationService = exports.PersonalizationService = /*#__PURE__*/funct
     key: "writeStoredProviderPctMap",
     value: function writeStoredProviderPctMap(cloudId, traitName, map) {
       try {
-        smartCardStorage.setItemWithExpiry(pctMapStorageItemKey(cloudId, traitName), map);
+        smartCardStorage.setItemWithExpiry(pctMapStorageItemKey(cloudId, traitName), map, PERSONALIZATION_PROVIDER_PCT_TTL_MS);
       } catch (_unused3) {
         // Quota, private-mode, etc.
       }
@@ -246,22 +242,25 @@ var PersonalizationService = exports.PersonalizationService = /*#__PURE__*/funct
   }]);
 }();
 var personalizationService = exports.personalizationService = new PersonalizationService();
-
-/**
- * Resolves the provider percentage map for a TAP Delivery trait through the module-level
- * {@link personalizationService}. Work is deduped per trait name for the page lifetime, and a
- * successful response is persisted by cloud id and trait name for later cached reads.
- */
-var getProviderPctMap = exports.getProviderPctMap = function getProviderPctMap(traitName) {
-  return personalizationService.getProviderPctMap(traitName);
+var getProviderPctMap = exports.getProviderPctMap = function getProviderPctMap(cloudId, traitName) {
+  return personalizationService.getProviderPctMap(cloudId, traitName);
 };
+function getProviderPctMapSync(cloudId, traitName) {
+  return personalizationService.getProviderPctMapSync(cloudId, traitName);
+}
 
 /**
- * Reads the provider percentage map for a trait from browser storage via the module-level
- * {@link personalizationService} singleton, without awaiting network work.
- * Calling this also starts the trait-scoped shared refresh in the background, so a later call can
- * use a refreshed value when it becomes available.
+ * Backwards-compatible cache-first helper for inline-card social proof callers.
+ *
+ * Reads the persisted provider percentage map synchronously using the current site cloud id, then
+ * starts a background refresh for subsequent mounts. The async result intentionally does not affect
+ * the current call site, matching the warm-cache-only rendering contract.
  */
 function getCachedProviderPctMapAndRefresh(traitName) {
-  return personalizationService.getCachedProviderPctMapAndRefresh(traitName);
+  var cloudId = (0, _currentSiteCloudId.getCurrentSiteCloudIdSync)();
+  var providerPctMap = getProviderPctMapSync(cloudId, traitName);
+  void (0, _currentSiteCloudId.getCurrentSiteCloudId)().then(function (resolvedCloudId) {
+    void getProviderPctMap(resolvedCloudId, traitName);
+  });
+  return providerPctMap;
 }

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

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

package/dist/cjs/view/BlockCard/views/SocialProofMessage.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _messages = require("../../../messages");
+// TODO: remove when social-proof-3p-unauth-block-fg is cleaned up
+var SocialProofMessage = function SocialProofMessage(_ref) {
+  var tier = _ref.tier,
+    connectedPct = _ref.connectedPct,
+    providerName = _ref.providerName,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-social-proof-message' : _ref$testId;
+  var message = tier === 'not-low' ? _messages.messages.pre_auth_block_social_proof_not_low : _messages.messages.pre_auth_block_social_proof_low;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, message, {
+    values: {
+      percentage: connectedPct !== null && connectedPct !== void 0 ? connectedPct : 0,
+      provider: providerName,
+      b: function b(chunks) {
+        return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+          as: "strong",
+          weight: "bold"
+        }, chunks);
+      }
+    }
+  })));
+};
+var _default = exports.default = SocialProofMessage;

package/dist/cjs/view/BlockCard/views/UnauthorisedView.js

@@ -14,13 +14,18 @@ var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactIntl = require("react-intl");
+var _reactMagneticDi = require("react-magnetic-di");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../constants");
 var _messages = require("../../../messages");
 var _flexibleUiContext = require("../../../state/flexible-ui-context");
 var _helpers = require("../../../state/helpers");
+var _useSocialProofExperiment = _interopRequireDefault(require("../../../state/hooks/use-social-proof-experiment"));
 var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/UnauthorisedViewContent"));
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
 var _actionGroup = _interopRequireDefault(require("../../FlexibleCard/components/blocks/action-group"));
@@ -30,9 +35,12 @@ var _utils = require("../../FlexibleCard/components/blocks/utils");
 var _elements = require("../../FlexibleCard/components/elements");
 var _AuthorizeAction = require("../actions/AuthorizeAction");
 var _general2x = _interopRequireDefault(require("./assets/general@2x.png"));
+var _SocialProofMessage = _interopRequireDefault(require("./SocialProofMessage"));
 var _utils2 = require("./utils");
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
-var _excluded = ["testId"];
+var _excluded = ["content", "providerName", "testId"],
+  _excluded2 = ["testId"],
+  _excluded3 = ["testId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var contentStyles = null;
 var contentAdditionalStyles = null;
@@ -170,15 +178,12 @@ var UnauthorisedBlock = function UnauthorisedBlock(_ref) {
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-var UnauthorisedView = function UnauthorisedView(_ref3) {
-  var _extractSmartLinkProv;
-  var _ref3$testId = _ref3.testId,
-    testId = _ref3$testId === void 0 ? 'smart-block-unauthorized-view' : _ref3$testId,
+var UnauthorisedViewFrame = function UnauthorisedViewFrame(_ref3) {
+  var content = _ref3.content,
+    providerName = _ref3.providerName,
+    testId = _ref3.testId,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var cardState = props.cardState,
-    onAuthorize = props.onAuthorize;
-  var providerName = (_extractSmartLinkProv = (0, _linkExtractors.extractSmartLinkProvider)(cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text;
-  var isProductIntegrationSupported = (0, _helpers.hasAuthScopeOverrides)(cardState.details);
+  var onAuthorize = props.onAuthorize;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var handleAuthorize = (0, _react.useCallback)(function () {
@@ -187,17 +192,6 @@ var UnauthorisedView = function UnauthorisedView(_ref3) {
       onAuthorize();
     }
   }, [onAuthorize, fireEvent]);
-  var content = (0, _react.useMemo)(function () {
-    return onAuthorize ? /*#__PURE__*/React.createElement(_UnauthorisedViewContent.default, {
-      providerName: providerName,
-      isProductIntegrationSupported: isProductIntegrationSupported,
-      testId: testId
-    }) : /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
-      values: {
-        context: providerName
-      }
-    }));
-  }, [isProductIntegrationSupported, onAuthorize, providerName, testId]);
   var actions = (0, _react.useMemo)(function () {
     return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(handleAuthorize, providerName)] : [];
   }, [handleAuthorize, onAuthorize, providerName]);
@@ -218,5 +212,76 @@ var UnauthorisedView = function UnauthorisedView(_ref3) {
     className: (0, _runtime.ax)(["_11c8fhey _syazi7uo _19pku2gc", actions.length > 0 && "_1reo15vq _18m915vq _otyrpxbi _p12f1osq _o5721q9c _1bto1l2s"])
   }, content)));
 };
+var UnauthorisedViewBase = function UnauthorisedViewBase(_ref4) {
+  var _extractSmartLinkProv;
+  var _ref4$testId = _ref4.testId,
+    testId = _ref4$testId === void 0 ? 'smart-block-unauthorized-view' : _ref4$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+  var cardState = props.cardState,
+    onAuthorize = props.onAuthorize;
+  var providerName = (_extractSmartLinkProv = (0, _linkExtractors.extractSmartLinkProvider)(cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text;
+  var isProductIntegrationSupported = (0, _helpers.hasAuthScopeOverrides)(cardState.details);
+  var content = (0, _react.useMemo)(function () {
+    return onAuthorize ? /*#__PURE__*/React.createElement(_UnauthorisedViewContent.default, {
+      providerName: providerName,
+      isProductIntegrationSupported: isProductIntegrationSupported,
+      testId: testId
+    }) : /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+      values: {
+        context: providerName
+      }
+    }));
+  }, [isProductIntegrationSupported, onAuthorize, providerName, testId]);
+  return /*#__PURE__*/React.createElement(UnauthorisedViewFrame, (0, _extends2.default)({}, props, {
+    content: content,
+    providerName: providerName,
+    testId: testId
+  }));
+};
+
+/**
+ * Experiment wrapper: fires social proof exposure and renders social proof UI when FG is on.
+ * TODO: remove when social-proof-3p-unauth-block-fg is cleaned up
+ */
+var UnauthorisedViewWithExperiment = function UnauthorisedViewWithExperiment(_ref5) {
+  var _props$cardState, _extractSmartLinkProv2;
+  var _ref5$testId = _ref5.testId,
+    testId = _ref5$testId === void 0 ? 'smart-block-unauthorized-view' : _ref5$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded3);
+  var extensionKey = (_props$cardState = props.cardState) === null || _props$cardState === void 0 || (_props$cardState = _props$cardState.details) === null || _props$cardState === void 0 || (_props$cardState = _props$cardState.meta) === null || _props$cardState === void 0 ? void 0 : _props$cardState.key;
+  var providerName = (_extractSmartLinkProv2 = (0, _linkExtractors.extractSmartLinkProvider)(props.cardState.details)) === null || _extractSmartLinkProv2 === void 0 ? void 0 : _extractSmartLinkProv2.text;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    connections = _useSmartLinkContext.connections;
+  var _useSocialProofExperi = (0, _useSocialProofExperiment.default)(providerName ? extensionKey : undefined, connections.client.baseUrlOverride),
+    isTreatment = _useSocialProofExperi.isTreatment,
+    tier = _useSocialProofExperi.tier,
+    connectedPct = _useSocialProofExperi.connectedPct;
+  if (!isTreatment || !providerName) {
+    return /*#__PURE__*/React.createElement(UnauthorisedViewBase, (0, _extends2.default)({}, props, {
+      testId: testId
+    }));
+  }
+  return /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      attributes: {
+        experiment: 'social_proof_3p_unauth_block_exp',
+        cohort: 'treatment',
+        tier: tier
+      }
+    }
+  }, /*#__PURE__*/React.createElement(UnauthorisedViewFrame, (0, _extends2.default)({}, props, {
+    content: /*#__PURE__*/React.createElement(_SocialProofMessage.default, {
+      tier: tier,
+      connectedPct: connectedPct,
+      providerName: providerName
+    }),
+    providerName: providerName,
+    testId: testId
+  })));
+};
+var UnauthorisedViewWithoutExperiment = function UnauthorisedViewWithoutExperiment(props) {
+  return /*#__PURE__*/React.createElement(UnauthorisedViewBase, props);
+};
+var UnauthorisedView = (0, _platformFeatureFlagsReact.componentWithFG)('social-proof-3p-unauth-block-fg', UnauthorisedViewWithExperiment, UnauthorisedViewWithoutExperiment);
 var _default_1 = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(UnauthorisedView);
 var _default = exports.default = _default_1;

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

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.6.1",
+  packageVersion: "44.7.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/__tests__/vr-tests/__snapshots__/block-card/block-card-social-proof-cold-cache--default.png

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

package/dist/es2019/__tests__/vr-tests/__snapshots__/block-card/block-card-social-proof-message-low-tier--default.png

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

package/dist/es2019/__tests__/vr-tests/__snapshots__/block-card/block-card-social-proof-message-not-low-tier--default.png

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

package/dist/es2019/messages.js

@@ -988,7 +988,7 @@ export const messages = defineMessages({
   },
   rovo_prompt_message_highlight_relevant_content: {
     id: 'fabric.linking.rovo_prompt_message_highlight_relevant_content.non-final',
-    defaultMessage: '<p>Based on this linked item (<a>{url}</a>) and the {context} I’m currently viewing, highlight the parts of the linked content that are most relevant to this work. Explain briefly why each part is relevant.</p>',
+    defaultMessage: "<p>Based on this linked item (<a>{url}</a>) and the {context} I'm currently viewing, highlight the parts of the linked content that are most relevant to this work. Explain briefly why each part is relevant.</p>",
     description: 'The prompt message to send to Rovo Chat. {context} refers to the content the user triggered from, e.g. Confluence page or Jira work item. {url} refers to Smart Link that the user triggers this action from. (Please make sure all html tags remain the same.)'
   },
   rovo_prompt_button_identify_key_trends: {
@@ -1050,5 +1050,16 @@ export const messages = defineMessages({
     id: 'fabric.linking.rovo_prompt_button_show_me_whats_relevant.non-final',
     defaultMessage: `Show me what's relevant`,
     description: 'The name of the action to send prompt message to Rovo Chat in relation to current Smart Link'
+  },
+  // TODO: remove when social-proof-3p-unauth-block-fg is cleaned up
+  pre_auth_block_social_proof_not_low: {
+    id: 'fabric.linking.pre_auth_block_social_proof_not_low',
+    defaultMessage: '<b>{percentage}%</b> of your team is previewing <b>{provider}</b>.',
+    description: 'Social proof message shown on unauthorized 3P block cards when 30% or more of the tenant has connected the provider. {percentage} is a number, {provider} is the 3P app name (e.g. OneDrive).'
+  },
+  pre_auth_block_social_proof_low: {
+    id: 'fabric.linking.pre_auth_block_social_proof_low',
+    defaultMessage: 'Your team is previewing <b>{provider}</b>.',
+    description: 'Social proof message shown on unauthorized 3P block cards when less than 30% of the tenant has connected the provider. {provider} is the 3P app name (e.g. OneDrive).'
   }
 });

package/dist/es2019/state/hooks/use-current-site-cloud-id/index.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { getCurrentSiteCloudId } from '../../services/current-site-cloud-id';
-export { CURRENT_SITE_CLOUD_ID_LOCAL_STORAGE_KEY, CURRENT_SITE_CLOUD_ID_STORAGE_ITEM_KEY, currentSiteCloudIdService, getCurrentSiteCloudId, getCachedCurrentSiteCloudIdAndRefresh } from '../../services/current-site-cloud-id';
 const useCurrentSiteCloudId = () => {
   const [cloudId, setCloudId] = useState(undefined);
   const [isLoading, setIsLoading] = useState(true);

package/dist/es2019/state/hooks/use-incoming-outgoing-links/index.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { request } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getCurrentSiteCloudId } from '../use-current-site-cloud-id';
+import { getCurrentSiteCloudId } from '../../services/current-site-cloud-id';
 import { queryIncomingOutgoingLinks as queryIncomingOutgoingAris } from './query';
 /**
  * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
@@ -33,7 +33,7 @@ const useIncomingOutgoingAri = (baseUriWithNoTrailingSlash = '') => {
     if (match && match[2]) {
       return match[2]; // Return the cloud_id (siteId)
     }
-    return fg('platform_sl_3p_preauth_soc_proof_inline_killswitch') ? await getCurrentSiteCloudId(baseUriWithNoTrailingSlash) : await getCurrentSiteId();
+    return fg('platform_sl_incoming_outgoing_tenant_info_killswitch') ? await getCurrentSiteCloudId(baseUriWithNoTrailingSlash) : await getCurrentSiteId();
   }, [getCurrentSiteId, baseUriWithNoTrailingSlash]);
   const getIncomingOutgoingAris = useCallback(
   /**

package/dist/es2019/state/hooks/use-social-proof/index.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { getProviderPctMap } from '../../services/personalization';
+import { getCurrentSiteCloudId, getCurrentSiteCloudIdSync } from '../../services/current-site-cloud-id';
+import { getProviderPctMap, getProviderPctMapSync, SOCIAL_PROOF_TRAIT_NAME } from '../../services/personalization';
 const NOT_ENABLED_RESULT = {
   connectedPct: undefined,
   isEnabled: false,
@@ -7,39 +8,57 @@ const NOT_ENABLED_RESULT = {
 };
 
 /**
- * Fetches provider usage percentage from the TAP Delivery personalization service when the
- * killswitch allows it. Callers decide separately (e.g. via Statsig experiment) whether to
- * surface that data in the UI.
+ * Cache-first social proof hook.
+ *
+ * On mount:
+ * 1. Reads localStorage synchronously via `getProviderPctMapSync`.
+ *    - If data exists (warm cache): sets `providerPctMap` immediately, `isLoading = false`.
+ *    - If no data (cold cache): leaves `providerPctMap` undefined, `isLoading = false`.
+ * 2. Always kicks off an async fetch (fire-and-forget) via `getProviderPctMap` to populate
+ *    localStorage for next page load. Does NOT update state with the async result.
+ *
+ * This means:
+ * - First page visit (cold): no social proof rendered, no experiment exposure fired.
+ *   Background fetch populates localStorage for next time.
+ * - Second page visit (warm): social proof renders immediately from localStorage.
+ *   Background refresh keeps localStorage fresh.
+ *
+ * Callers decide separately (e.g. via Statsig experiment) whether to surface the data.
  */
-const useSocialProof = (traitName, extensionKey, isKillswitchOn = false) => {
+const useSocialProof = (extensionKey, isKillswitchOn = false, baseUriWithNoTrailingSlash = '') => {
   const isEnabled = isKillswitchOn;
-  const [providerPctMap, setProviderPctMap] = useState(undefined);
-  const [isPersonalizationLoading, setIsPersonalizationLoading] = useState(false);
+  const [snapshot] = useState(() => {
+    if (!isEnabled) {
+      return {
+        cloudId: undefined,
+        providerPctMap: null
+      };
+    }
+    const cloudId = getCurrentSiteCloudIdSync(baseUriWithNoTrailingSlash);
+    return {
+      cloudId,
+      providerPctMap: getProviderPctMapSync(cloudId, SOCIAL_PROOF_TRAIT_NAME)
+    };
+  });
+
+  // Fire-and-forget: warm caches for future mounts only. Never update this mount's treatment UI.
   useEffect(() => {
     if (!isEnabled) {
       return;
     }
-    let cancelled = false;
-    setIsPersonalizationLoading(true);
-    getProviderPctMap(traitName).then(pctMap => {
-      if (!cancelled) {
-        setProviderPctMap(pctMap);
-        setIsPersonalizationLoading(false);
-      }
+    void getCurrentSiteCloudId(baseUriWithNoTrailingSlash).then(cloudId => {
+      void getProviderPctMap(cloudId, SOCIAL_PROOF_TRAIT_NAME);
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [isEnabled, traitName]);
+  }, [baseUriWithNoTrailingSlash, isEnabled]);
   return useMemo(() => {
     if (!isEnabled) {
       return NOT_ENABLED_RESULT;
     }
     return {
-      connectedPct: extensionKey && providerPctMap ? providerPctMap[extensionKey] : undefined,
-      isEnabled,
-      isLoading: isPersonalizationLoading
+      connectedPct: extensionKey && snapshot.providerPctMap ? snapshot.providerPctMap[extensionKey] : undefined,
+      isEnabled: Boolean(snapshot.cloudId && snapshot.providerPctMap),
+      isLoading: false // sync read is instant; never in "loading" state
     };
-  }, [extensionKey, isEnabled, isPersonalizationLoading, providerPctMap]);
+  }, [extensionKey, isEnabled, snapshot]);
 };
 export default useSocialProof;

package/dist/es2019/state/hooks/use-social-proof-experiment/index.js

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import useSocialProof from '../use-social-proof';
+const TIER_THRESHOLD = 30;
+
+/**
+ * Returns enrollment and treatment state for the social proof unauth block card experiment.
+ *
+ * Delegates data-fetching to `useSocialProof` (Sasha's shared service layer),
+ * which handles cloudId resolution, TAP trait fetch, localStorage caching,
+ * request deduping, and sync reads.
+ *
+ * This hook adds the experiment/cohort layer on top:
+ * - Only fires exposure (via editorExperiment) when data has loaded.
+ * - Derives `tier` and `isTreatment` for rendering decisions.
+ *
+ * Expected to be called only inside the fg-enabled branch (via componentWithFG).
+ *
+ * @param extensionKey - The extensionKey of the current 3P provider (e.g. 'google-object-provider').
+ */
+const useSocialProofExperiment = (extensionKey, baseUriWithNoTrailingSlash = '') => {
+  const {
+    connectedPct,
+    isEnabled,
+    isLoading
+  } = useSocialProof(extensionKey, true, baseUriWithNoTrailingSlash);
+  return useMemo(() => {
+    const hasSocialProofData = connectedPct !== undefined;
+
+    // Only fire exposure when data has loaded (prevents exposure inflation)
+    const isTreatment = isEnabled && !isLoading && hasSocialProofData ? editorExperiment('social_proof_3p_unauth_block_exp', true) : false;
+    const tier = connectedPct !== undefined && connectedPct >= TIER_THRESHOLD ? 'not-low' : 'low';
+    return {
+      isTreatment,
+      tier,
+      connectedPct,
+      isLoading
+    };
+  }, [isEnabled, isLoading, connectedPct]);
+};
+export default useSocialProofExperiment;