@atlaskit/reactions 35.13.8 → 36.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 36.0.0
+
+### Major Changes
+
+- [`1b02e7b19fed0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b02e7b19fed0) -
+  [ux] This is for adding a reaction failure callback and reverting optimistic add/remove updates
+  when the request fails. https://customerfeedback.atlassian.net/browse/MWIV-1073
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 35.13.8
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.13.7";
+var packageVersion = "35.13.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -18,7 +18,7 @@ var _components = require("../../components");
 var _Reactions = require("../../components/Reactions");
 var _store2 = require("../../store");
 var _types = require("../../types");
-var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess", "onReactionFailure"];
 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); }
 /**
  * State Props required for <Reactions />
@@ -63,26 +63,42 @@ var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToP
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-var mapDispatchToPropsHelper = exports.mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack) {
+var mapDispatchToPropsHelper = exports.mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack, failureCallBack) {
   return {
     loadReaction: function loadReaction() {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: function onReactionClick(emojiId) {
+      if (successCallBack && failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: function getReactionDetails(emojiId) {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: function onSelection(emojiId) {
+      if (successCallBack && failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.addReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -93,6 +109,7 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
     store = props.store,
     particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
     onReactionSuccess = props.onReactionSuccess,
+    onReactionFailure = props.onReactionFailure,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -141,8 +158,8 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
    * @param actions list of actions in the store instance
    */
   var mapDispatchToProps = (0, _react.useCallback)(function (actions) {
-    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
-  }, [ari, containerAri, onReactionSuccess]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess, onReactionFailure);
+  }, [ari, containerAri, onReactionSuccess, onReactionFailure]);
   var resolveStore = (0, _react.useCallback)(function (store) {
     if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
       store.setCreateAnalyticsEvent(createAnalyticsEvent);

package/dist/cjs/store/MemoryReactionsStore.js

@@ -15,6 +15,7 @@ var _utils = require("./utils");
 var _constants = require("../shared/constants");
 var _ufo = require("../ufo");
 var _reaction = require("../types/reaction");
+var _expVal = require("@atlaskit/platform-feature-experiments/exp-val");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -134,7 +135,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         });
       };
     });
-    (0, _defineProperty2.default)(this, "doAddReaction", function (reaction, onSuccess) {
+    (0, _defineProperty2.default)(this, "doAddReaction", function (reaction, onSuccess, onFailure) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -169,10 +170,15 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
             }
           });
         }
+        if (onFailure && (0, _expVal.expVal)('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          _this.optmisticUpdate(containerAri, ari, emojiId)(_utils.removeOne);
+          onFailure(_reaction.ReactionUpdateType.added, ari, emojiId, error);
+        }
         return Promise.reject(error);
       });
     });
-    (0, _defineProperty2.default)(this, "doRemoveReaction", function (reaction, onSuccess) {
+    (0, _defineProperty2.default)(this, "doRemoveReaction", function (reaction, onSuccess, onFailure) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -202,6 +208,11 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
             reason: 'deleteReaction fetch failed'
           }
         });
+        if (onFailure && (0, _expVal.expVal)('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          _this.optmisticUpdate(containerAri, ari, emojiId)(_utils.addOne);
+          onFailure(_reaction.ReactionUpdateType.removed, ari, emojiId, error);
+        }
       });
     });
     (0, _defineProperty2.default)(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
@@ -362,7 +373,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
     key: "withReaction",
     value: function withReaction(reactedCallback, notReactedCallback) {
       var _this3 = this;
-      return function (containerAri, ari, emojiId, onSuccess) {
+      return function (containerAri, ari, emojiId, onSuccess, onFailure) {
         _this3.withReadyReaction(containerAri, ari)(function (reactionsState) {
           var reaction = reactionsState.reactions.find((0, _utils.byEmojiId)(emojiId)) || {
             containerAri: containerAri,
@@ -372,7 +383,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
             reacted: false
           };
           var callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-          var updatedReaction = callback(reaction, onSuccess);
+          var updatedReaction = callback(reaction, onSuccess, onFailure);
           if (updatedReaction && !(updatedReaction instanceof Function)) {
             return (0, _utils.readyState)(reactionsState.reactions.map((0, _utils.updateByEmojiId)(emojiId, updatedReaction)));
           }

package/dist/cjs/types/reaction.js

@@ -40,6 +40,14 @@ var ReactionUpdateType = exports.ReactionUpdateType = /*#__PURE__*/function (Rea
  * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
  * @param emojiId - The ID of the emoji used in the reaction.
  */
+/**
+ * Event handler that is invoked when a reaction update (add/remove) fails.
+ *
+ * @param {ReactionUpdateType} action - The action that was attempted on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ * @param error - The error raised by the underlying reaction service call.
+ */
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "35.13.7";
+const packageVersion = "35.13.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -50,26 +50,42 @@ export const mapStateToPropsHelper = (containerAri, ari, particleEffectByEmojiEn
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export const mapDispatchToPropsHelper = (actions, containerAri, ari, successCallBack) => {
+export const mapDispatchToPropsHelper = (actions, containerAri, ari, successCallBack, failureCallBack) => {
   return {
     loadReaction: () => {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: emojiId => {
+      if (successCallBack && failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: emojiId => {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: emojiId => {
+      if (successCallBack && failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.addReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -81,6 +97,7 @@ export const ConnectedReactionsView = props => {
     store,
     particleEffectByEmojiEnabled,
     onReactionSuccess,
+    onReactionFailure,
     ...rest
   } = props;
   /**
@@ -125,8 +142,8 @@ export const ConnectedReactionsView = props => {
    * @param actions list of actions in the store instance
    */
   const mapDispatchToProps = useCallback(actions => {
-    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
-  }, [ari, containerAri, onReactionSuccess]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess, onReactionFailure);
+  }, [ari, containerAri, onReactionSuccess, onReactionFailure]);
   const resolveStore = useCallback(store => {
     if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
       store.setCreateAnalyticsEvent(createAnalyticsEvent);

package/dist/es2019/store/MemoryReactionsStore.js

@@ -6,6 +6,8 @@ import { addOne, byEmojiId, flattenAris, getReactionsSortFunction, isRealErrorFr
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { ReactionsAdd, ReactionDetailsFetch, ReactionsRemove, sampledReactionsRendered } from '../ufo';
 import { ReactionUpdateType } from '../types/reaction';
+import { expVal } from '@atlaskit/platform-feature-experiments/exp-val';
+
 /**
  * Set of all available UFO experiences relating to reaction element
  */
@@ -121,7 +123,7 @@ export class MemoryReactionsStore {
         return readyState(reactions);
       });
     });
-    _defineProperty(this, "doAddReaction", (reaction, onSuccess) => {
+    _defineProperty(this, "doAddReaction", (reaction, onSuccess, onFailure) => {
       const {
         containerAri,
         ari,
@@ -158,10 +160,15 @@ export class MemoryReactionsStore {
             }
           });
         }
+        if (onFailure && expVal('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          this.optmisticUpdate(containerAri, ari, emojiId)(removeOne);
+          onFailure(ReactionUpdateType.added, ari, emojiId, error);
+        }
         return Promise.reject(error);
       });
     });
-    _defineProperty(this, "doRemoveReaction", (reaction, onSuccess) => {
+    _defineProperty(this, "doRemoveReaction", (reaction, onSuccess, onFailure) => {
       const {
         containerAri,
         ari,
@@ -193,6 +200,11 @@ export class MemoryReactionsStore {
             reason: 'deleteReaction fetch failed'
           }
         });
+        if (onFailure && expVal('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          this.optmisticUpdate(containerAri, ari, emojiId)(addOne);
+          onFailure(ReactionUpdateType.removed, ari, emojiId, error);
+        }
       });
     });
     _defineProperty(this, "setCreateAnalyticsEvent", createAnalyticsEvent => {
@@ -353,7 +365,7 @@ export class MemoryReactionsStore {
    *  emojiId. If some state is returned, the new state will be applied.
    */
   withReaction(reactedCallback, notReactedCallback) {
-    return (containerAri, ari, emojiId, onSuccess) => {
+    return (containerAri, ari, emojiId, onSuccess, onFailure) => {
       this.withReadyReaction(containerAri, ari)(reactionsState => {
         const reaction = reactionsState.reactions.find(byEmojiId(emojiId)) || {
           containerAri,
@@ -363,7 +375,7 @@ export class MemoryReactionsStore {
           reacted: false
         };
         const callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-        const updatedReaction = callback(reaction, onSuccess);
+        const updatedReaction = callback(reaction, onSuccess, onFailure);
         if (updatedReaction && !(updatedReaction instanceof Function)) {
           return readyState(reactionsState.reactions.map(updateByEmojiId(emojiId, updatedReaction)));
         }

package/dist/es2019/types/reaction.js

@@ -41,6 +41,15 @@ export let ReactionUpdateType = /*#__PURE__*/function (ReactionUpdateType) {
  * @param emojiId - The ID of the emoji used in the reaction.
  */
 
+/**
+ * Event handler that is invoked when a reaction update (add/remove) fails.
+ *
+ * @param {ReactionUpdateType} action - The action that was attempted on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ * @param error - The error raised by the underlying reaction service call.
+ */
+
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.13.7";
+var packageVersion = "35.13.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess", "onReactionFailure"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context/FabricElementsAnalyticsContext';
@@ -55,26 +55,42 @@ export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri,
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack) {
+export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack, failureCallBack) {
   return {
     loadReaction: function loadReaction() {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: function onReactionClick(emojiId) {
+      if (successCallBack && failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: function getReactionDetails(emojiId) {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: function onSelection(emojiId) {
+      if (successCallBack && failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack, failureCallBack);
+        return;
+      }
       if (successCallBack) {
         actions.addReaction(containerAri, ari, emojiId, successCallBack);
         return;
       }
+      if (failureCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, undefined, failureCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -85,6 +101,7 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
     store = props.store,
     particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
     onReactionSuccess = props.onReactionSuccess,
+    onReactionFailure = props.onReactionFailure,
     rest = _objectWithoutProperties(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -133,8 +150,8 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
    * @param actions list of actions in the store instance
    */
   var mapDispatchToProps = useCallback(function (actions) {
-    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
-  }, [ari, containerAri, onReactionSuccess]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess, onReactionFailure);
+  }, [ari, containerAri, onReactionSuccess, onReactionFailure]);
   var resolveStore = useCallback(function (store) {
     if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
       store.setCreateAnalyticsEvent(createAnalyticsEvent);

package/dist/esm/store/MemoryReactionsStore.js

@@ -10,6 +10,8 @@ import { addOne, byEmojiId, flattenAris, getReactionsSortFunction, isRealErrorFr
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { ReactionsAdd, ReactionDetailsFetch, ReactionsRemove, sampledReactionsRendered } from '../ufo';
 import { ReactionUpdateType } from '../types/reaction';
+import { expVal } from '@atlaskit/platform-feature-experiments/exp-val';
+
 /**
  * Set of all available UFO experiences relating to reaction element
  */
@@ -128,7 +130,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         });
       };
     });
-    _defineProperty(this, "doAddReaction", function (reaction, onSuccess) {
+    _defineProperty(this, "doAddReaction", function (reaction, onSuccess, onFailure) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -163,10 +165,15 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             }
           });
         }
+        if (onFailure && expVal('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          _this.optmisticUpdate(containerAri, ari, emojiId)(removeOne);
+          onFailure(ReactionUpdateType.added, ari, emojiId, error);
+        }
         return Promise.reject(error);
       });
     });
-    _defineProperty(this, "doRemoveReaction", function (reaction, onSuccess) {
+    _defineProperty(this, "doRemoveReaction", function (reaction, onSuccess, onFailure) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -196,6 +203,11 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             reason: 'deleteReaction fetch failed'
           }
         });
+        if (onFailure && expVal('exp-comment-reaction-fail-fix', 'isEnabled', false)) {
+          // revert the optimistic update since the request failed
+          _this.optmisticUpdate(containerAri, ari, emojiId)(addOne);
+          onFailure(ReactionUpdateType.removed, ari, emojiId, error);
+        }
       });
     });
     _defineProperty(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
@@ -356,7 +368,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
     key: "withReaction",
     value: function withReaction(reactedCallback, notReactedCallback) {
       var _this3 = this;
-      return function (containerAri, ari, emojiId, onSuccess) {
+      return function (containerAri, ari, emojiId, onSuccess, onFailure) {
         _this3.withReadyReaction(containerAri, ari)(function (reactionsState) {
           var reaction = reactionsState.reactions.find(byEmojiId(emojiId)) || {
             containerAri: containerAri,
@@ -366,7 +378,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             reacted: false
           };
           var callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-          var updatedReaction = callback(reaction, onSuccess);
+          var updatedReaction = callback(reaction, onSuccess, onFailure);
           if (updatedReaction && !(updatedReaction instanceof Function)) {
             return readyState(reactionsState.reactions.map(updateByEmojiId(emojiId, updatedReaction)));
           }

package/dist/esm/types/reaction.js

@@ -41,6 +41,15 @@ export var ReactionUpdateType = /*#__PURE__*/function (ReactionUpdateType) {
  * @param emojiId - The ID of the emoji used in the reaction.
  */
 
+/**
+ * Event handler that is invoked when a reaction update (add/remove) fails.
+ *
+ * @param {ReactionUpdateType} action - The action that was attempted on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ * @param error - The error raised by the underlying reaction service call.
+ */
+
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
-import { type ReactionSummary, type ReactionUpdateSuccess } from '../../types/reaction';
+import { type ReactionSummary, type ReactionUpdateSuccess, type ReactionUpdateFailure } from '../../types/reaction';
 export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'isViewOnly' | 'allowSelectFromSummaryView' | 'reactionPickerPopperZIndex'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Individual id for a reaction
@@ -11,6 +11,10 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
      * Wrapper id for reactions list
      */
     containerAri: string;
+    /**
+     * Callback function when adding/removing a reaction fails
+     */
+    onReactionFailure?: ReactionUpdateFailure;
     /**
      * Callback function when a reaction is successfully added
      */
@@ -30,24 +34,24 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
  * Export the mapper function outside the component so easier to do unit tests
  */
 export declare const mapStateToPropsHelper: (containerAri: string, ari: string, particleEffectByEmojiEnabled?: boolean, state?: State) => {
-    status: ReactionStatus;
-    reactions: never[];
     flash?: undefined;
     particleEffectByEmoji?: undefined;
+    reactions: never[];
+    status: ReactionStatus;
 } | {
-    reactions: ReactionSummary[];
-    status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;
     };
     particleEffectByEmoji: {
         [emojiId: string]: boolean;
     };
+    reactions: ReactionSummary[];
+    status: ReactionStatus.ready;
 };
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string, successCallBack?: ReactionUpdateSuccess) => {
+export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string, successCallBack?: ReactionUpdateSuccess, failureCallBack?: ReactionUpdateFailure) => {
     loadReaction: () => void;
     onReactionClick: (emojiId: string) => void;
     getReactionDetails: (emojiId: string) => void;

package/dist/types/store/MemoryReactionsStore.d.ts

@@ -1,6 +1,6 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import { type Client, type OnChangeCallback, type State, type Store } from '../types';
-import { type ReactionUpdateSuccess } from '../types/reaction';
+import { type ReactionUpdateSuccess, type ReactionUpdateFailure } from '../types/reaction';
 import type { WithSamplingUFOExperience } from '@atlaskit/emoji';
 import type { ConcurrentExperience } from '@atlaskit/ufo/concurrent-experience';
 /**
@@ -11,6 +11,10 @@ export declare const ufoExperiences: {
      * Experience when a reaction emoji gets added
      */
     add: ConcurrentExperience;
+    /**
+     * Experience when a reaction details gets fetched
+     */
+    fetchDetails: ConcurrentExperience;
     /**
      * Experience when a reaction emoji gets removed/decrement
      */
@@ -19,10 +23,6 @@ export declare const ufoExperiences: {
      * Experience when the list of reactions gets rendered with sampling
      */
     render: (instanceId: string) => WithSamplingUFOExperience;
-    /**
-     * Experience when a reaction details gets fetched
-     */
-    fetchDetails: ConcurrentExperience;
 };
 /**
  * Optional metadata information in the store used in sending the API client requests
@@ -89,8 +89,8 @@ export declare class MemoryReactionsStore implements Store {
     private doRemoveReaction;
     setCreateAnalyticsEvent: (createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;
     getReactions: (key: string, ...args: string[]) => void;
-    toggleReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
-    addReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
+    toggleReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess, onFailure?: ReactionUpdateFailure) => void;
+    addReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess, onFailure?: ReactionUpdateFailure) => void;
     getDetailedReaction: (containerAri: string, ari: string, emojiId: string) => void;
     getState: () => State;
     onChange: (callback: OnChangeCallback) => void;

package/dist/types/types/Actions.d.ts

@@ -1,11 +1,13 @@
-import { type ReactionUpdateSuccess } from './reaction';
+import { type ReactionUpdateFailure, type ReactionUpdateSuccess } from './reaction';
 /**
  * Event callback by the client to the API
  * @param containerAri the container for reactions/ari in the page (attached to the "quickReactionEmojis" prop)
  * @param ariunique Atlassian identifier for an emoji (attached to the "quickReactionEmojis" prop)
  * @param emojiId unique identifier guid for the emoji
+ * @param onSuccess (Optional) callback invoked when the reaction update succeeds
+ * @param onFailure (Optional) callback invoked when the reaction update fails
  */
-export type ReactionAction = (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
+export type ReactionAction = (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess, onFailure?: ReactionUpdateFailure) => void;
 export type Actions = {
     /**
      * Add a new reation api

package/dist/types/types/Updater.d.ts

@@ -1,2 +1,2 @@
-import { type ReactionUpdateSuccess } from './reaction';
-export type Updater<T> = (original: T, onSuccess?: ReactionUpdateSuccess) => T | void;
+import { type ReactionUpdateFailure, type ReactionUpdateSuccess } from './reaction';
+export type Updater<T> = (original: T, onSuccess?: ReactionUpdateSuccess, onFailure?: ReactionUpdateFailure) => T | void;

package/dist/types/types/reaction.d.ts

@@ -83,6 +83,15 @@ export declare enum ReactionUpdateType {
  * @param emojiId - The ID of the emoji used in the reaction.
  */
 export type ReactionUpdateSuccess = (action: ReactionUpdateType, ari: string, emojiId: string, count: number) => void;
+/**
+ * Event handler that is invoked when a reaction update (add/remove) fails.
+ *
+ * @param {ReactionUpdateType} action - The action that was attempted on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ * @param error - The error raised by the underlying reaction service call.
+ */
+export type ReactionUpdateFailure = (action: ReactionUpdateType, ari: string, emojiId: string, error: unknown) => void;
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.13.8",
+	"version": "36.0.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
 		"@atlaskit/spinner": "^20.3.0",
 		"@atlaskit/tabs": "^21.1.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^161.0.0",
+		"@atlaskit/tmp-editor-statsig": "^162.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/ufo": "^1.0.0",