fix(tooling): add strict type checking in ccwidgets

packages/contact-center/cc-components/package.json

@@ -3,6 +3,7 @@
   "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
   "version": "1.28.0-ccwidgets.55",
   "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -75,4 +76,4 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}

packages/contact-center/cc-components/src/components/UserState/user-state.tsx

@@ -7,6 +7,7 @@ import './user-state.scss';
 import {SelectNext, Text} from '@momentum-ui/react-collaboration';
 import {Item} from '@react-stately/collections';
 import {Icon} from '@momentum-design/components/dist/react';
+import {ICustomState, IdleCode} from '@webex/cc-store';
 
 const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
   const {
@@ -23,17 +24,19 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
     return idleCodes.find((code) => code.id !== AgentUserState.RONA && code.id !== AgentUserState.Engaged)?.id ?? '0';
   }, [idleCodes]);
 
-  let selectedKey;
-  if (customState) {
+  let selectedKey,
+    items: (IdleCode | ICustomState)[] = [];
+  if (customState && 'developerName' in customState) {
     selectedKey = `hide-${customState.developerName}`;
   } else {
     selectedKey = currentState;
   }
 
-  const items = customState
-    ? [{name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName}]
-    : [];
-
+  if (customState && 'developerName' in customState) {
+    items = customState
+      ? [{name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName}]
+      : [];
+  }
   for (const item of idleCodes) {
     if (item.name === AgentUserState.RONA && item.id === currentState) {
       selectedKey = `hide-${item.id}`;
@@ -62,8 +65,9 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
     return 'idle';
   };
 
-  const getIconStyle = (item) => {
-    if (item.developerName) {
+  // TODO: Not sure about this typing
+  const getIconStyle = (item: ICustomState | IdleCode) => {
+    if (item && 'developerName' in item) {
       return {class: 'custom', iconName: 'busy-presence-light'};
     }
     switch (item.id) {

packages/contact-center/cc-components/src/components/UserState/user-state.types.ts

@@ -24,11 +24,6 @@ export interface IUserState {
    */
   isSettingAgentStatus: boolean;
 
-  /**
-   * The error message to display
-   */
-  errorMessage: string;
-
   /**
    * The duration of the current user state
    */
@@ -53,13 +48,6 @@ export interface IUserState {
    * The preferred theme
    */
   currentTheme: string;
-
-  /**
-   * Function to handle state change
-   * @param state The state to change to
-   * @returns void
-   */
-  onStateChange: (state: string) => void;
 }
 
 export enum AgentUserState {

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

@@ -2,7 +2,7 @@ import {
   ILogger,
   ITask,
   IContactCenter,
-  WrapupCodes,
+  IWrapupCode,
   BuddyDetails,
   DestinationType,
   ContactServiceQueue,
@@ -142,7 +142,7 @@ export interface ControlProps {
    * Array of wrap-up codes.
    * TODO: Expose this type from SDK.
    */
-  wrapupCodes: WrapupCodes[];
+  wrapupCodes: IWrapupCode[];
 
   /**
    * Indicates if wrap-up is required.

packages/contact-center/cc-components/src/wc.ts

@@ -13,13 +13,11 @@ const WebUserState = r2wc(UserStateComponent, {
     idleCodes: 'json',
     setAgentStatus: 'function',
     isSettingAgentStatus: 'boolean',
-    errorMessage: 'string',
     elapsedTime: 'number',
     lastIdleStateChangeElapsedTime: 'number',
     currentState: 'string',
     customState: 'json',
     currentTheme: 'string',
-    onStateChange: 'function',
   },
 });
 if (!customElements.get('component-cc-user-state')) {

packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import StationLoginComponent from '../../../src/components/StationLogin/station-login';
+import {StationLoginComponentProps} from '../../../src/components/StationLogin/station-login.types';
 import '@testing-library/jest-dom';
 
 jest.mock('@momentum-design/components/dist/react', () => ({
@@ -14,8 +15,7 @@ jest.mock('@momentum-design/components/dist/react', () => ({
 }));
 
 describe('StationLoginComponent', () => {
-  const props = {
-    name: 'StationLogin',
+  const props: StationLoginComponentProps = {
     login: jest.fn(),
     logout: jest.fn(),
     loginSuccess: undefined,
@@ -32,7 +32,6 @@ describe('StationLoginComponent', () => {
     dialNumberRegex: '',
     showMultipleLoginAlert: false,
     handleContinue: jest.fn(),
-    modalRef: React.createRef<HTMLDialogElement>(),
   };
 
   afterEach(() => {

packages/contact-center/cc-components/tests/components/UserState/user-state.tsx

@@ -2,21 +2,23 @@ import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import UserStateComponent from '../../../src/components/UserState/user-state';
+import {IUserState} from '../../../src/components/UserState/user-state.types';
 
 describe('UserStateComponent', () => {
   const mockSetAgentStatus = jest.fn();
-  const defaultProps = {
+  const defaultProps: IUserState = {
     idleCodes: [
-      {id: '1', name: 'Idle Code 1', isSystem: false},
-      {id: '2', name: 'Idle Code 2', isSystem: true},
-      {id: '3', name: 'Idle Code 3', isSystem: false},
+      {id: '1', name: 'Idle Code 1', isSystem: false, isDefault: false},
+      {id: '2', name: 'Idle Code 2', isSystem: true, isDefault: false},
+      {id: '3', name: 'Idle Code 3', isSystem: false, isDefault: false},
     ],
     setAgentStatus: mockSetAgentStatus,
     isSettingAgentStatus: false,
-    errorMessage: '',
     elapsedTime: 3661, // 1 hour, 1 minute, 1 second
     currentState: '1',
     currentTheme: 'LIGHT',
+    lastIdleStateChangeElapsedTime: 20,
+    customState: null,
   };
 
   it('should render the component with correct elements', () => {
@@ -41,7 +43,7 @@ describe('UserStateComponent', () => {
   });
 
   it('should display an error message if provided', () => {
-    render(<UserStateComponent {...defaultProps} errorMessage="Error message" />);
+    render(<UserStateComponent {...defaultProps} />);
     expect(screen.getByText('Error message')).toBeInTheDocument();
     expect(screen.getByText('Error message')).toHaveStyle('color: red');
   });

packages/contact-center/cc-components/tests/components/task/CallControl/call-control-consult.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CallControlConsultComponent from '../../../../src/components/task/CallControl/CallControlCustom/call-control-consult';
+import {CallControlConsultComponentsProps} from '../../../../src/components/task/task.types';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonCircle: (props) => {
@@ -50,13 +51,14 @@ afterAll(() => {
 describe('CallControlConsultComponent', () => {
   const mockOnTransfer = jest.fn();
   const mockEndConsultCall = jest.fn();
-  const defaultProps = {
+  const defaultProps: CallControlConsultComponentsProps = {
     agentName: 'Alice',
     startTimeStamp: Date.now(),
     onTransfer: mockOnTransfer,
     endConsultCall: mockEndConsultCall,
     consultCompleted: true,
     isAgentBeingConsulted: true,
+    isEndConsultEnabled: false,
   };
 
   beforeEach(() => {

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

@@ -3,6 +3,7 @@ import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CallControlComponent from '../../../../src/components/task/CallControl/call-control';
+import {CallControlComponentProps} from '../../../../src/components/task/task.types';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: (props) => (
@@ -90,7 +91,7 @@ describe('CallControlPresentational', () => {
   const mockSetConsultAgentName = jest.fn();
   const setIsHeld = jest.fn();
 
-  const defaultProps = {
+  const defaultProps: CallControlComponentProps = {
     currentTask: {
       data: {
         interaction: {
@@ -103,7 +104,6 @@ describe('CallControlPresentational', () => {
         },
       },
     },
-    audioRef: React.createRef(),
     toggleHold: mockToggleHold,
     toggleRecording: mockToggleRecording,
     endCall: mockEndCall,
@@ -129,6 +129,17 @@ describe('CallControlPresentational', () => {
     consultAgentName: null,
     endConsultCall: jest.fn(),
     consultTransfer: jest.fn(),
+    isHeld: false,
+    isRecording: false,
+    consultInitiated: false,
+    consultCompleted: false,
+    consultAccepted: false,
+    callControlAudio: {} as MediaStream,
+    holdTime: 0,
+    isEndConsultEnabled: false,
+    allowConsultToQueue: false,
+    lastTargetType: 'queue',
+    setLastTargetType: jest.fn(),
   };
 
   beforeEach(() => {

packages/contact-center/cc-components/tests/components/task/CallControl/consult-transfer-list-item.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ConsultTransferListComponent from '../../../../src/components/task/CallControl/CallControlCustom/consult-transfer-list-item';
+import {ConsultTransferListComponentProps} from '../../../../src/components/task/task.types';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ListItemBase: (props) => (
@@ -38,7 +39,7 @@ afterAll(() => {
 
 describe('CallControlListItemPresentational', () => {
   const mockOnButtonPress = jest.fn();
-  const defaultProps = {
+  const defaultProps: ConsultTransferListComponentProps = {
     title: 'John Doe',
     subtitle: 'Manager',
     buttonIcon: 'test-icon',

packages/contact-center/cc-components/tests/components/task/CallControl/consult-transfer-popover.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ConsultTransferPopoverComponent from '../../../../src/components/task/CallControl/CallControlCustom/consult-transfer-popover';
+import {ConsultTransferPopoverComponentProps} from '../../../../src/components/task/task.types';
 
 jest.mock('../../../../src/components/task/CallControl/CallControlCustom/consult-transfer-list-item', () => {
   const MockListItem = (props: any) => (
@@ -55,7 +56,7 @@ afterAll(() => {
 describe('ConsultTransferPopoverComponent', () => {
   const mockOnAgentSelect = jest.fn();
   const mockOnQueueSelect = jest.fn();
-  const baseProps = {
+  const baseProps: ConsultTransferPopoverComponentProps = {
     heading: 'Select an Agent',
     buttonIcon: 'agent-icon',
     buddyAgents: [
@@ -68,6 +69,7 @@ describe('ConsultTransferPopoverComponent', () => {
     ],
     onAgentSelect: mockOnAgentSelect,
     onQueueSelect: mockOnQueueSelect,
+    allowConsultToQueue: false,
   };
 
   beforeEach(() => {

packages/contact-center/cc-components/tests/components/task/IncomingTask/incoming-task.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {render, screen, cleanup} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import IncomingTaskComponent from '../../../../src/components/task/IncomingTask/incoming-task';
+import {IncomingTaskComponentProps} from '../../../../src/components/task/task.types';
 
 jest.mock('@momentum-ui/react-collaboration', () => ({
   ButtonPill: () => <div data-testid="ButtonPill" />,
@@ -30,14 +31,11 @@ describe('IncomingTaskComponent', () => {
       },
     };
 
-    const props = {
+    const props: IncomingTaskComponentProps = {
       incomingTask: mockTask,
+      isBrowser: true,
       accept: jest.fn(),
       decline: jest.fn(),
-      isBrowser: true,
-      isAnswered: false,
-      isEnded: false,
-      isMissed: false,
     };
 
     render(<IncomingTaskComponent {...props} />);

packages/contact-center/cc-components/tests/components/task/OutdialCall/out-dial-call.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import {render, fireEvent, screen} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import OutdialCallComponent from '../../../../src/components/task/OutdialCall/outdial-call';
+import {OutdialCallComponentProps} from '../../../../src/components/task/task.types';
 
 describe('OutdialCallComponent', () => {
   const mockStartOutdial = jest.fn();
 
-  const props = {
+  const props: OutdialCallComponentProps = {
     startOutdial: mockStartOutdial,
   };
 

packages/contact-center/cc-components/tests/components/task/TaskList/task-list.tsx

@@ -19,20 +19,26 @@ describe('TaskListPresentational Component', () => {
   afterEach(cleanup);
 
   it('renders a list of tasks when taskList is not empty', () => {
-    const props: TaskListComponentProps = {
-      taskList: [
-        {
-          id: '1',
-          data: {
-            interaction: {
-              callAssociatedDetails: {
-                ani: '1234567890',
-                dn: '9876543210',
-                virtualTeamName: 'Sales Team',
-              },
-            },
+    const mockTask = {
+      id: '1',
+      data: {
+        interaction: {
+          callAssociatedDetails: {
+            ani: '1234567890',
+            dn: '9876543210',
+            virtualTeamName: 'Sales Team',
           },
         },
+      },
+    };
+    const props: TaskListComponentProps = {
+      currentTask: mockTask,
+      isBrowser: false,
+      acceptTask: jest.fn(),
+      declineTask: jest.fn(),
+      taskList: [
+        mockTask,
+
         {
           id: '2',
           data: {

packages/contact-center/cc-widgets/package.json

@@ -3,6 +3,7 @@
   "description": "Webex Contact Center Widgets",
   "version": "1.28.0-ccwidgets.55",
   "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -86,4 +87,4 @@
       "^.+\\.(css|less|scss)$": "babel-jest"
     }
   }
-}
+}