[Calling] Applying capability for Reaction feature (#4013)

Author: Mohtasim

change-beta/@azure-communication-react-38a28d49-fd3b-439f-9196-ef93bc583780.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Applying capability for reaction feature",
+  "comment": "Applying meeting capability for reaction feature",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-38a28d49-fd3b-439f-9196-ef93bc583780.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Applying capability for reaction feature",
+  "comment": "Applying meeting capability for reaction feature",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/components/CallControls.tsx

@@ -49,6 +49,11 @@ import {
 } from '../../common/ControlBar/CustomButton';
 /* @conditional-compile-remove(reaction) */
 import { Reaction } from './buttons/Reaction';
+/* @conditional-compile-remove(reaction) */
+import { useSelector } from '../hooks/useSelector';
+/* @conditional-compile-remove(reaction) */
+import { capabilitySelector } from '../../CallComposite/selectors/capabilitySelector';
+
 /**
  * @private
  */
@@ -137,6 +142,12 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
   /* @conditional-compile-remove(raise-hand) */
   const raiseHandButtonProps = usePropsFor(RaiseHandButton) as RaiseHandButtonProps;
 
+  /* @conditional-compile-remove(reaction) */
+  const capabilitiesSelector = useSelector(capabilitySelector);
+  /* @conditional-compile-remove(reaction) */
+  const isReactionAllowed =
+    !capabilitiesSelector?.capabilities || capabilitiesSelector.capabilities.useReactions.isPresent;
+
   /* @conditional-compile-remove(PSTN-calls) */
   const alternateCallerId = useAdapter().getState().alternateCallerId;
 
@@ -172,7 +183,7 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
   }
 
   /* @conditional-compile-remove(reaction) */
-  const showReactionButtonInControlBar = isEnabled(options?.reactionButton) && !props.isMobile;
+  const showReactionButtonInControlBar = isEnabled(options?.reactionButton) && isReactionAllowed && !props.isMobile;
   /* @conditional-compile-remove(reaction) */
   if (showReactionButtonInControlBar) {
     numberOfButtons++;

packages/react-composites/src/composites/CallComposite/selectors/baseSelectors.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import { CallState as SDKCallStatus, DominantSpeakersInfo } from '@azure/communication-calling';
+import { ParticipantCapabilities } from '@azure/communication-calling';
 import { VideoDeviceInfo, AudioDeviceInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(capabilities) */
 import { CapabilitiesChangeInfo } from '@azure/communication-calling';
@@ -62,6 +63,12 @@ export const getIsScreenShareOn = (state: CallAdapterState): boolean => state.ca
 export const getLocalParticipantRaisedHand = (state: CallAdapterState): RaisedHandState | undefined =>
   state.call?.raiseHand.localParticipantRaisedHand;
 
+/**
+ * @private
+ */
+export const getCapabilites = (state: CallAdapterState): ParticipantCapabilities | undefined =>
+  state.call?.capabilitiesFeature?.capabilities;
+
 /**
  * @private
  */

packages/react-composites/src/composites/CallComposite/selectors/capabilitySelector.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as reselect from 'reselect';
+import { getCapabilites } from './baseSelectors';
+
+/**
+ * @private
+ */
+export const capabilitySelector = reselect.createSelector([getCapabilites], (capabilities) => {
+  return {
+    capabilities
+  };
+});

packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx

@@ -45,6 +45,10 @@ import { CaptionsSettingsModal } from '../CaptionsSettingsModal';
 import { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';
 /* @conditional-compile-remove(reaction) */
 import { Reaction } from '../../CallComposite/components/buttons/Reaction';
+/* @conditional-compile-remove(reaction) */
+import { useSelector } from '../../CallComposite/hooks/useSelector';
+/* @conditional-compile-remove(reaction) */
+import { capabilitySelector } from '../../CallComposite/selectors/capabilitySelector';
 /**
  * @private
  */
@@ -222,6 +226,12 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
     [options]
   );
 
+  /* @conditional-compile-remove(reaction) */
+  const capabilitiesSelector = useSelector(capabilitySelector);
+  /* @conditional-compile-remove(reaction) */
+  const isReactionAllowed =
+    !capabilitiesSelector?.capabilities || capabilitiesSelector.capabilities.useReactions.isPresent;
+
   // when options is false then we want to hide the whole control bar.
   if (options === false) {
     return <></>;
@@ -320,7 +330,7 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
                     )}
                     {
                       /* @conditional-compile-remove(reaction) */
-                      !props.mobileView && isEnabled(options.reactionButton) && (
+                      !props.mobileView && isReactionAllowed && isEnabled(options.reactionButton) && (
                         <Reaction
                           displayType={options.displayType}
                           styles={commonButtonStyles}