fix(cc-widgets): Enable or disable Conference feature based on prop

packages/contact-center/store/package.json

@@ -59,4 +59,4 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"
   }
-}
+}

packages/contact-center/task/src/Utils/constants.ts

@@ -3,4 +3,3 @@ export const MEDIA_TYPE_TELEPHONY = 'telephony';
 export const MEDIA_TYPE_CHAT = 'chat';
 export const MEDIA_TYPE_EMAIL = 'email';
 export const MAX_PARTICIPANTS_IN_MULTIPARTY_CONFERENCE = 7;
-export const MAX_PARTICIPANTS_IN_THREE_PARTY_CONFERENCE = 2;

packages/contact-center/task/src/Utils/task-util.ts

@@ -17,7 +17,6 @@ import {
   MEDIA_TYPE_CHAT,
   MEDIA_TYPE_EMAIL,
   MAX_PARTICIPANTS_IN_MULTIPARTY_CONFERENCE,
-  MAX_PARTICIPANTS_IN_THREE_PARTY_CONFERENCE,
 } from './constants';
 import {DeviceTypeFlags} from '../task.types';
 
@@ -177,9 +176,11 @@ export function getConferenceButtonVisibility(
   webRtcEnabled: boolean,
   isCall: boolean,
   isChat: boolean,
-  isBeingConsulted: boolean
+  isBeingConsulted: boolean,
+  multiPartyConferenceEnabled: boolean
 ): Visibility {
-  const isVisible = ((isBrowser && isCall && webRtcEnabled) || isChat) && !isBeingConsulted;
+  const isVisible =
+    ((isBrowser && isCall && webRtcEnabled) || isChat) && !isBeingConsulted && multiPartyConferenceEnabled;
 
   return {isVisible, isEnabled: true};
 }
@@ -199,9 +200,10 @@ export function getExitConferenceButtonVisibility(
   isConsultInitiatedOrAccepted: boolean,
   consultCallHeld: boolean,
   isHeld: boolean,
-  isConsultCompleted: boolean
+  isConsultCompleted: boolean,
+  multiPartyConferenceEnabled: boolean
 ): Visibility {
-  const isVisible = isConferenceInProgress && !isConsultInitiatedOrAccepted;
+  const isVisible = isConferenceInProgress && !isConsultInitiatedOrAccepted && multiPartyConferenceEnabled;
   const isConferenceWithConsultNotHeld = isConferenceInProgress && isConsultInitiatedOrAccepted && !consultCallHeld;
   // Disable if: conference with consult not held OR (held AND in conference AND consult completed)
   const isEnabled = !isConferenceWithConsultNotHeld && !(isHeld && isConferenceInProgress && isConsultCompleted);
@@ -217,9 +219,10 @@ export function getMergeConferenceButtonVisibility(
   isConsultAccepted: boolean,
   consultCallHeld: boolean,
   isConferenceInProgress: boolean,
-  isCustomerInCall: boolean
+  isCustomerInCall: boolean,
+  multiPartyConferenceEnabled: boolean
 ): Visibility {
-  const isVisible = isConsultInitiatedOrAccepted && isCustomerInCall;
+  const isVisible = isConsultInitiatedOrAccepted && isCustomerInCall && multiPartyConferenceEnabled;
   const isConferenceWithConsultNotHeld = isConferenceInProgress && isConsultInitiatedOrAccepted && !consultCallHeld;
   const isEnabled = isConsultAccepted && consultCallHeld && !isConferenceWithConsultNotHeld;
 
@@ -291,9 +294,10 @@ export function getMergeConferenceConsultButtonVisibility(
   isConsultAccepted: boolean,
   isConsultInitiated: boolean,
   consultCallHeld: boolean,
-  isCustomerInCall: boolean
+  isCustomerInCall: boolean,
+  multiPartyConferenceEnabled: boolean
 ): Visibility {
-  const isVisible = isConsultAccepted || isConsultInitiated;
+  const isVisible = (isConsultAccepted || isConsultInitiated) && multiPartyConferenceEnabled;
   const isEnabled = !consultCallHeld && isConsultAccepted && isCustomerInCall;
 
   return {isVisible, isEnabled};
@@ -419,9 +423,6 @@ export function getControlsVisibility(
 
     // Calculate conference participants count
     const conferenceParticipantsCount = getConferenceParticipantsCount(task);
-    const maxParticipantsInConference = multiPartyConferenceEnabled
-      ? MAX_PARTICIPANTS_IN_MULTIPARTY_CONFERENCE
-      : MAX_PARTICIPANTS_IN_THREE_PARTY_CONFERENCE;
 
     // Calculate consult status flags (REUSED CONDITIONS)
     const isConsultInitiated = taskConsultStatus === ConsultStatus.CONSULT_INITIATED;
@@ -472,20 +473,29 @@ export function getControlsVisibility(
 
       // Transfer and conference controls
       transfer: getTransferButtonVisibility(isTransferVisibility, isConferenceInProgress, isConsultInitiatedOrAccepted),
-      conference: getConferenceButtonVisibility(isBrowser, webRtcEnabled, isCall, isChat, isBeingConsulted),
+      conference: getConferenceButtonVisibility(
+        isBrowser,
+        webRtcEnabled,
+        isCall,
+        isChat,
+        isBeingConsulted,
+        multiPartyConferenceEnabled
+      ),
       exitConference: getExitConferenceButtonVisibility(
         isConferenceInProgress,
         isConsultInitiatedOrAccepted,
         consultCallHeld,
         isHeld,
-        isConsultCompleted
+        isConsultCompleted,
+        multiPartyConferenceEnabled
       ),
       mergeConference: getMergeConferenceButtonVisibility(
         isConsultInitiatedOrAcceptedOnly,
         isConsultAccepted,
         consultCallHeld,
         isConferenceInProgress,
-        isCustomerInCall
+        isCustomerInCall,
+        multiPartyConferenceEnabled
       ),
 
       // Consult controls
@@ -495,7 +505,7 @@ export function getControlsVisibility(
         isConsultInProgress,
         isCustomerInCall,
         conferenceParticipantsCount,
-        maxParticipantsInConference,
+        MAX_PARTICIPANTS_IN_MULTIPARTY_CONFERENCE,
         isBeingConsulted,
         isHeld,
         isConsultCompleted,
@@ -524,7 +534,8 @@ export function getControlsVisibility(
         isConsultAccepted,
         isConsultInitiated,
         consultCallHeld,
-        isCustomerInCall
+        isCustomerInCall,
+        multiPartyConferenceEnabled
       ),
       muteUnmuteConsult: getMuteUnmuteConsultButtonVisibility(
         isBrowser,

packages/contact-center/task/tests/utils/task-util.ts

@@ -57,7 +57,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is BROWSER, webRtcEnabled is disbaled and media type is telehphony', () => {
@@ -98,7 +98,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is BROWSER, isEndCallEnabled is disbaled and media type is telehphony', () => {
@@ -139,7 +139,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is BROWSER, isEndConsultEnabled is disbaled and media type is telehphony', () => {
@@ -186,7 +186,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is AGENT_DN, all flags are enabled and media type is telehphony', () => {
@@ -227,7 +227,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, mockTask, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is EXTENSION, all flags are enabled and media type is telehphony', () => {
@@ -271,7 +271,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is EXTENSION, all flags are enabled and media type is chat', () => {
@@ -315,7 +315,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should show correct controls when station logis is BROWSER, all flags are enabled and media type is email', () => {
@@ -359,7 +359,7 @@ describe('getControlsVisibility', () => {
       consultCallHeld: false,
     };
 
-    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', false)).toEqual(expectedControls);
+    expect(getControlsVisibility(deviceType, featureFlags, task, 'agent1', true)).toEqual(expectedControls);
   });
 
   it('should handle errors when accessing featureFlags and return safe defaults', () => {

widgets-samples/cc/samples-cc-react-app/src/App.tsx

@@ -74,6 +74,10 @@
     const savedintegrationEnv = window.localStorage.getItem('integrationEnv');
     return savedintegrationEnv === 'true';
   });
+  const [multiPartyConferenceEnabled, setMultiPartyConferenceEnabled] = useState(() => {
+    const savedMultiPartyConferenceEnabled = window.localStorage.getItem('multiPartyConferenceEnabled');
+    return savedMultiPartyConferenceEnabled !== null ? savedMultiPartyConferenceEnabled === 'true' : true;
+  });
 
   const handleSaveStart = () => {
     setShowLoader(true);
@@ -339,6 +343,9 @@
   useEffect(() => {
     window.localStorage.setItem('integrationEnv', JSON.stringify(integrationEnv));
   }, [integrationEnv]);
+  useEffect(() => {
+    window.localStorage.setItem('multiPartyConferenceEnabled', JSON.stringify(multiPartyConferenceEnabled));
+  }, [multiPartyConferenceEnabled]);
 
   useEffect(() => {
     store.setIncomingTaskCb(onIncomingTaskCB);
@@ -494,7 +501,7 @@
                                       style={{color: 'var(--mds-color-theme-text-error-normal)', marginBottom: '10px'}}
                                     >
                                       <strong>Note:</strong> When a number is dialed, the agent gets an incoming task to
                                       accept via an Extension, Dial Number, or Browser. It's recommended to have the
                                       incoming task/task list widget and call controls widget according to your needs.
                                     </div>
                                   </Text>
@@ -556,6 +563,16 @@
                         setintegrationEnv(!integrationEnv);
                       }}
                     />
+                    <Checkbox
+                      checked={multiPartyConferenceEnabled}
+                      aria-label="multi party conference enabled checkbox"
+                      id="multi-party-conference-enabled-checkbox"
+                      label="Enable Multi-Party Conference"
+                      // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
+                      onchange={() => {
+                        setMultiPartyConferenceEnabled(!multiPartyConferenceEnabled);
+                      }}
+                    />
                     {store.isAgentLoggedIn && (
                       <Button
                         id="logoutAgent"
@@ -595,9 +612,9 @@
                             className="warning-note"
                             style={{color: 'var(--mds-color-theme-text-error-normal)', marginBottom: '10px'}}
                           >
                             <strong>Note:</strong> The "Enable Multi Login" option must be set before initializing the
                             SDK. Changes to this setting after SDK initialization will not take effect. Please ensure
                             you configure this option before clicking the "Init Widgets" button.
                           </div>
                         </Text>
                       </PopoverNext>
@@ -753,6 +770,7 @@
                               onWrapUp={onWrapUp}
                               onRecordingToggle={onRecordingToggle}
                               onToggleMute={onToggleMute}
+                              multiPartyConferenceEnabled={multiPartyConferenceEnabled}
                             />
                           </fieldset>
                         </section>
@@ -771,6 +789,7 @@
                               callControlClassName={'call-control-outer'}
                               callControlConsultClassName={'call-control-consult-outer'}
                               onToggleMute={onToggleMute}
+                              multiPartyConferenceEnabled={multiPartyConferenceEnabled}
                             />
                           </fieldset>
                         </section>