updated CallControlCad component to support viewing agent viewable global variables

Author: Christina Mullen

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss

@@ -22,6 +22,26 @@
   }
 }
 
+.global-variables {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 0.75rem;
+
+  .global-variable-item {
+    font-size: 1rem;
+    color: var(--mds-color-theme-text-primary-normal);
+
+    strong {
+      font-weight: bold;
+    }
+
+    span {
+      font-weight: 250;
+    }
+  }
+}
+
 /* On-hold chip styling */
 .on-hold {
   display: flex;
@@ -44,7 +64,6 @@
   }
 }
 
-
 .recording-indicator {
   position: absolute;
   top: 0.5rem;
@@ -143,8 +162,6 @@
   transform: rotate(180deg);
 }
 
-
-
 .call-status {
   display: flex;
   align-items: center;
@@ -200,11 +217,11 @@
 }
 
 .digital-customer-name {
-   width: auto;
+  width: auto;
 }
 
 .digital-phone-number {
-   width: auto;
+  width: auto;
 }
 
 @media (min-width: 64.0625rem) and (max-width: 75rem) {
@@ -230,8 +247,8 @@
     max-width: 15rem;
   }
   .call-control-task-tooltip {
-   width: 50%;
-   text-align: center;
+    width: 50%;
+    text-align: center;
   }
 }
 
@@ -246,8 +263,8 @@
     max-width: 13rem;
   }
   .call-control-task-tooltip {
-   width: 50%;
-   text-align: center;
+    width: 50%;
+    text-align: center;
   }
 }
 
@@ -262,27 +279,27 @@
     max-width: 12rem;
   }
   .call-control-task-tooltip {
-   width: 50%;
-   text-align: center;
+    width: 50%;
+    text-align: center;
   }
 }
 
-@media (min-width: 15.625rem) and (max-width: 20rem){
+@media (min-width: 15.625rem) and (max-width: 20rem) {
   .call-control-task-tooltip {
     width: 50%;
     text-align: center;
   }
 }
 
 .participants-popover {
-  background: var(--mds-color-theme-background-solid-primary-normal, #FFFFFF) !important;
+  background: var(--mds-color-theme-background-solid-primary-normal, #ffffff) !important;
   align-items: normal;
   width: 100%;
   padding: 0 !important;
   border: var(--mds-color-theme-outline-secondary-normal);
 
   &::part(popover-content) {
-    background: var(--mds-color-theme-background-solid-primary-normal, #FFFFFF);
+    background: var(--mds-color-theme-background-solid-primary-normal, #ffffff);
     border-radius: 0.75rem;
     border: 1px solid var(--mds-color-theme-outline-secondary-normal);
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
@@ -307,7 +324,7 @@
     padding: 0.4rem 0.6rem;
     font-size: 0.875rem;
     cursor: pointer;
-    color: var(--mds-color-theme-text-primary-normal, #000000F2);
+    color: var(--mds-color-theme-text-primary-normal, #000000f2);
     border-radius: 0.5rem;
     min-width: 0;
     max-width: 100%;

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx

@@ -5,7 +5,13 @@ import {Brandvisual, Icon, Tooltip, Button} from '@momentum-design/components/di
 import './call-control-cad.styles.scss';
 import TaskTimer from '../TaskTimer/index';
 import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
-import {MEDIA_CHANNEL as MediaChannelType, CallControlComponentProps, getCallerIdentifier} from '../task.types';
+import {
+  MEDIA_CHANNEL as MediaChannelType,
+  CallControlComponentProps,
+  getCallerIdentifier,
+  CallAssociatedDataMap,
+  getAgentViewableGlobalVariables,
+} from '../task.types';
 
 import {getMediaTypeInfo} from '../../../utils';
 import {
@@ -69,6 +75,10 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
   const dn = currentTask?.data?.interaction?.callAssociatedDetails?.dn;
 
+  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
+  const callAssociatedData = currentTask?.data?.interaction?.callAssociatedData as CallAssociatedDataMap | undefined;
+  const globalVariables = getAgentViewableGlobalVariables(callAssociatedData);
+
   // Create unique IDs for tooltips
   const customerNameTriggerId = `customer-name-trigger-${currentTask.data.interaction.interactionId}`;
   const customerNameTooltipId = `customer-name-tooltip-${currentTask.data.interaction.interactionId}`;
@@ -275,6 +285,21 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
           </Text>
           {renderPhoneNumber()}
         </div>
+        {globalVariables.length > 0 && (
+          <div className="global-variables" data-testid="cc-cad:global-variables">
+            {globalVariables.map((variable) => (
+              <Text
+                key={variable.name}
+                className="global-variable-item"
+                type="body-secondary"
+                tagName={'small'}
+                data-testid={`cc-cad:global-var-${variable.name}`}
+              >
+                <strong>{variable.displayName || variable.name}:</strong> <span>{variable.value || ''}</span>
+              </Text>
+            ))}
+          </div>
+        )}
       </div>
       {controlVisibility.isConsultInitiatedOrAccepted && !controlVisibility.wrapup.isVisible && (
         <div className={`call-control-consult-container ${callControlConsultClassName || ''}`}>

packages/contact-center/cc-components/src/components/task/task.types.ts

@@ -16,6 +16,61 @@ import {
 
 type Enum<T extends Record<string, unknown>> = T[keyof T];
 
+/**
+ * Represents a single Call Associated Data (CAD) variable on an interaction.
+ * Global variables have `global: true` and are set by flow control.
+ */
+export interface CADVariable {
+  name: string;
+  displayName: string;
+  value: string;
+  type: string;
+  agentEditable: boolean;
+  agentViewable: boolean;
+  global: boolean;
+  isSecure: boolean;
+  secureKeyId: string;
+  secureKeyVersion: number;
+}
+
+/**
+ * Record of CAD variables keyed by variable name.
+ * This is the shape of `callAssociatedData` on the interaction at runtime.
+ */
+export type CallAssociatedDataMap = Record<string, CADVariable>;
+
+/** System CAD variable keys that are already displayed elsewhere in the UI. */
+export const SYSTEM_CAD_KEYS = new Set([
+  'ani',
+  'dn',
+  'customerName',
+  'virtualTeamName',
+  'ronaTimeout',
+  'FC-DESKTOP-VIEW',
+]);
+
+/**
+ * Returns agent-viewable global variables from a callAssociatedData map,
+ * excluding system variables that are already rendered elsewhere.
+ */
+export const getAgentViewableGlobalVariables = (
+  callAssociatedData: CallAssociatedDataMap | undefined
+): CADVariable[] => {
+  if (!callAssociatedData || typeof callAssociatedData !== 'object') {
+    return [];
+  }
+
+  return Object.entries(callAssociatedData)
+    .filter(([key, cadVar]) => {
+      if (!cadVar || !cadVar.name) return false;
+      if (cadVar.agentViewable === false) return false;
+      if (!cadVar.global) return false;
+      if (SYSTEM_CAD_KEYS.has(key)) return false;
+      return true;
+    })
+    .map(([, cadVar]) => cadVar);
+};
+
 /**
  * Target types for consult/transfer operations
  */

packages/contact-center/cc-components/tests/components/task/CallControlCAD/call-control-cad.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import {render} from '@testing-library/react';
 import CallControlCADComponent from '../../../../src/components/task/CallControlCAD/call-control-cad';
-import {CallControlComponentProps, TARGET_TYPE, OUTBOUND_TYPE} from '../../../../src/components/task/task.types';
+import {
+  CallControlComponentProps,
+  TARGET_TYPE,
+  OUTBOUND_TYPE,
+  CallAssociatedDataMap,
+} from '../../../../src/components/task/task.types';
 import {mockTask} from '@webex/test-fixtures';
 import {BuddyDetails} from '@webex/cc-store';
 import '@testing-library/jest-dom';
@@ -370,4 +375,143 @@ describe('CallControlCADComponent', () => {
     const customConsultContainer = customScreen.container.querySelector('.call-control-consult-container');
     expect(customConsultContainer).toHaveClass('custom-consult-control');
   });
+
+  describe('Global Variables', () => {
+    const mockCallAssociatedData: CallAssociatedDataMap = {
+      Global_Language: {
+        name: 'Global_Language',
+        displayName: 'Customer Language',
+        value: 'English',
+        type: 'STRING',
+        agentEditable: false,
+        agentViewable: true,
+        global: true,
+        isSecure: false,
+        secureKeyId: '',
+        secureKeyVersion: 0,
+      },
+      Global_FeedbackSurveyOptIn: {
+        name: 'Global_FeedbackSurveyOptIn',
+        displayName: 'Post Call Survey Opt-in',
+        value: 'true',
+        type: 'STRING',
+        agentEditable: false,
+        agentViewable: true,
+        global: true,
+        isSecure: false,
+        secureKeyId: '',
+        secureKeyVersion: 0,
+      },
+      ani: {
+        name: 'ani',
+        displayName: 'ani',
+        value: '555-123-4567',
+        type: 'STRING',
+        agentEditable: false,
+        agentViewable: true,
+        global: false,
+        isSecure: false,
+        secureKeyId: '',
+        secureKeyVersion: 0,
+      },
+      Global_Hidden: {
+        name: 'Global_Hidden',
+        displayName: 'Hidden Variable',
+        value: 'secret',
+        type: 'STRING',
+        agentEditable: false,
+        agentViewable: false,
+        global: true,
+        isSecure: false,
+        secureKeyId: '',
+        secureKeyVersion: 0,
+      },
+    };
+
+    const makePropsWithCallAssociatedData = (callAssociatedData: CallAssociatedDataMap) => ({
+      ...defaultProps,
+      currentTask: {
+        ...defaultProps.currentTask,
+        data: {
+          ...defaultProps.currentTask.data,
+          interaction: {
+            ...defaultProps.currentTask.data.interaction,
+            callAssociatedData,
+          },
+        },
+      },
+    });
+
+    it('should render agent-viewable global variables', () => {
+      const screen = render(<CallControlCADComponent {...makePropsWithCallAssociatedData(mockCallAssociatedData)} />);
+
+      const globalVarsContainer = screen.getByTestId('cc-cad:global-variables');
+      expect(globalVarsContainer).toBeInTheDocument();
+
+      expect(screen.getByTestId('cc-cad:global-var-Global_Language')).toBeInTheDocument();
+      expect(screen.getByText('Customer Language:')).toBeInTheDocument();
+      expect(screen.getByText('English')).toBeInTheDocument();
+
+      expect(screen.getByTestId('cc-cad:global-var-Global_FeedbackSurveyOptIn')).toBeInTheDocument();
+      expect(screen.getByText('Post Call Survey Opt-in:')).toBeInTheDocument();
+      expect(screen.getByText('true')).toBeInTheDocument();
+    });
+
+    it('should not render non-global variables (e.g. system CAD like ani)', () => {
+      const screen = render(<CallControlCADComponent {...makePropsWithCallAssociatedData(mockCallAssociatedData)} />);
+
+      expect(screen.queryByTestId('cc-cad:global-var-ani')).not.toBeInTheDocument();
+    });
+
+    it('should not render global variables where agentViewable is false', () => {
+      const screen = render(<CallControlCADComponent {...makePropsWithCallAssociatedData(mockCallAssociatedData)} />);
+
+      expect(screen.queryByTestId('cc-cad:global-var-Global_Hidden')).not.toBeInTheDocument();
+    });
+
+    it('should not render global variables section when no global variables exist', () => {
+      const screen = render(<CallControlCADComponent {...defaultProps} />);
+
+      expect(screen.queryByTestId('cc-cad:global-variables')).not.toBeInTheDocument();
+    });
+
+    it('should not render global variables section when callAssociatedData is undefined', () => {
+      const propsWithNoData = {
+        ...defaultProps,
+        currentTask: {
+          ...defaultProps.currentTask,
+          data: {
+            ...defaultProps.currentTask.data,
+            interaction: {
+              ...defaultProps.currentTask.data.interaction,
+            },
+          },
+        },
+      };
+      const screen = render(<CallControlCADComponent {...propsWithNoData} />);
+
+      expect(screen.queryByTestId('cc-cad:global-variables')).not.toBeInTheDocument();
+    });
+
+    it('should use variable name as label when displayName is empty', () => {
+      const dataWithEmptyDisplayName: CallAssociatedDataMap = {
+        Global_NoDisplay: {
+          name: 'Global_NoDisplay',
+          displayName: '',
+          value: 'some value',
+          type: 'STRING',
+          agentEditable: false,
+          agentViewable: true,
+          global: true,
+          isSecure: false,
+          secureKeyId: '',
+          secureKeyVersion: 0,
+        },
+      };
+      const screen = render(<CallControlCADComponent {...makePropsWithCallAssociatedData(dataWithEmptyDisplayName)} />);
+
+      expect(screen.getByText('Global_NoDisplay:')).toBeInTheDocument();
+      expect(screen.getByText('some value')).toBeInTheDocument();
+    });
+  });
 });