fix(tooling): add type checking in ccwidgets

.gitignore

@@ -45,6 +45,7 @@ reports/
 !package.json
 !package-lock.json
 !tsconfig.json
+!tsconfig.test.json
 node_modules/
 .yarn/*
 !.yarn/releases

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.91",
   "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +21,7 @@
     "build": "yarn run -T tsc",
     "build:src": "yarn run clean:dist && webpack",
     "build:watch": "webpack --watch",
-    "test:unit": "jest --coverage",
+    "test:unit": "tsc --project tsconfig.test.json && jest --coverage",
     "test:styles": "eslint"
   },
   "dependencies": {
@@ -39,6 +40,7 @@
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.14",
     "@types/react-test-renderer": "18",
+    "@webex/test-fixtures": "workspace:*",
     "babel-loader": "9.2.1",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.0.1",
@@ -65,4 +67,4 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}

packages/contact-center/cc-components/src/components/StationLogin/constants.ts

@@ -27,16 +27,3 @@ export const StationLoginLabels = {
 export const SignInErrors = {
   ['DUPLICATE_LOCATION']: 'This extension is already in use.',
 };
-
-// Utility consts
-const DIALNUMBER: string = 'AGENT_DN';
-const EXTENSION: string = 'EXTENSION';
-const DESKTOP: string = 'BROWSER';
-
-const LoginOptions: {[key: string]: string} = {
-  [DIALNUMBER]: 'Dial Number',
-  [EXTENSION]: 'Extension',
-  [DESKTOP]: 'Desktop',
-};
-
-export {DIALNUMBER, EXTENSION, DESKTOP, LoginOptions};

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

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from 'react';
 import {StationLoginComponentProps} from './station-login.types';
 import './station-login.style.scss';
-import {DESKTOP, LoginOptions, SignInErrors, StationLoginLabels} from './constants';
+import {SignInErrors, StationLoginLabels} from './constants';
+import {LoginOptions, DESKTOP} from '@webex/cc-store';
 import {Button, Icon, Select, Option, Text, Tooltip, Input} from '@momentum-design/components/dist/react';
 import {
   ccCancelButtonClicked,

packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts

@@ -1,5 +1,6 @@
-import {IContactCenter, StationLoginSuccess, StationLogoutSuccess, Team} from '@webex/plugin-cc';
-import {ILogger} from '@webex/cc-store';
+import {StationLoginSuccessResponse, LogoutSuccess} from '@webex/plugin-cc';
+import {IContactCenter, ILogger} from '@webex/cc-store';
+import {Team} from '@webex/plugin-cc/dist/types/types';
 /**
  * Interface representing the properties for the Station Login component.
  */
@@ -34,7 +35,7 @@ export interface IStationLoginProps {
   /**
    * Response data received on agent login success
    */
-  loginSuccess?: StationLoginSuccess;
+  loginSuccess?: StationLoginSuccessResponse;
 
   /**
    * Error received on agent login failure
@@ -44,7 +45,7 @@ export interface IStationLoginProps {
   /**
    * Response data received on agent login success
    */
-  logoutSuccess?: StationLogoutSuccess;
+  logoutSuccess?: LogoutSuccess;
 
   /**
    * Flag to indicate if the agent is logged in
@@ -199,11 +200,6 @@ export interface IStationLoginProps {
    * The selected team ID for login
    */
   selectedTeamId: string;
-
-  /**
-   * The selected option for login type (e.g., 'Extension', 'Agent DN', etc.)
-   */
-  selectedOption: string;
 }
 
 export interface LoginOptionsState {
@@ -245,5 +241,4 @@ export type StationLoginComponentProps = Pick<
   | 'setDialNumberValue'
   | 'setSelectedTeamId'
   | 'selectedTeamId'
-  | 'selectedOption'
 >;

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

@@ -1,5 +1,6 @@
 import {useRef} from 'react';
-import {DESKTOP, DIALNUMBER, LoginOptions, StationLoginLabels} from './constants';
+import {StationLoginLabels} from './constants';
+import {LoginOptions, DESKTOP, DIALNUMBER} from '@webex/cc-store';
 
 const handleModals = (
   modalRef,

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

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 
-import {IUserState, AgentUserState} from './user-state.types';
+import {AgentUserState, UserStateComponentsProps} from './user-state.types';
 import {formatTime} from '../../utils';
 
 import './user-state.scss';
@@ -18,7 +18,7 @@ import {
   buildDropdownItems,
 } from './user-state.utils';
 
-const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
+const UserStateComponent: React.FunctionComponent<UserStateComponentsProps> = (props) => {
   const {
     idleCodes,
     setAgentStatus,
@@ -51,6 +51,7 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
       >
         {(item) => {
           const isRonaOrEngaged = [AgentUserState.RONA, AgentUserState.Engaged].includes(
+            //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
             idleCodes.find((code) => code.id === currentState)?.name || ''
           );
           const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);

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

@@ -1,4 +1,4 @@
-import {IdleCode, ICustomState, ILogger} from '@webex/cc-store';
+import {IdleCode, ICustomState, ILogger, IContactCenter} from '@webex/cc-store';
 
 /**
  * Interface representing the state of a user.
@@ -24,11 +24,6 @@ export interface IUserState {
    */
   isSettingAgentStatus: boolean;
 
-  /**
-   * The error message to display
-   */
-  errorMessage: string;
-
   /**
    * The duration of the current user state
    */
@@ -55,18 +50,49 @@ export interface IUserState {
   currentTheme: string;
 
   /**
-   * Function to handle state change
-   * @param state The state to change to
-   * @returns void
+   * Logger instance
    */
-  onStateChange: (state: string) => void;
+  logger: ILogger;
 
   /**
-   * Logger instance
+   * Callback function to be called when the state changes.
+   * @param state The new state.
    */
-  logger: ILogger;
+  onStateChange?: (arg: IdleCode | ICustomState) => void;
+
+  /**
+   * The agent ID.
+   */
+  agentId: string;
+
+  /**
+   * CC SDK Instance.
+   */
+  cc: IContactCenter;
+
+  /**
+   * The timestamp of the last state change.
+   */
+  lastStateChangeTimestamp?: number;
+
+  /**
+   * The timestamp of the last idle code change.
+   */
+  lastIdleCodeChangeTimestamp?: number;
 }
 
+export type UserStateComponentsProps = Pick<
+  IUserState,
+  | 'idleCodes'
+  | 'setAgentStatus'
+  | 'isSettingAgentStatus'
+  | 'elapsedTime'
+  | 'lastIdleStateChangeElapsedTime'
+  | 'currentState'
+  | 'customState'
+  | 'logger'
+>;
+
 export enum AgentUserState {
   Available = 'Available',
   RONA = 'RONA',

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

@@ -91,7 +91,7 @@ export const getPreviousSelectableState = (idleCodes: IdleCode[]): string => {
  * Gets the selected key for the dropdown
  */
 export const getSelectedKey = (customState: ICustomState, currentState: string, idleCodes: IdleCode[]): string => {
-  if (customState) {
+  if (customState && 'developerName' in customState) {
     return `custom-${customState.developerName}`;
   }
 
@@ -121,7 +121,7 @@ export const buildDropdownItems = (
       name: code.name,
     }));
 
-  if (customState) {
+  if (customState && 'developerName' in customState) {
     items.push({
       id: `custom-${customState.developerName}`,
       name: customState.name,

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

@@ -1,13 +1,14 @@
 import React, {useEffect, useState} from 'react';
 
-import {CallControlComponentProps, DestinationType, CallControlMenuType} from '../task.types';
+import {CallControlComponentProps, CallControlMenuType} from '../task.types';
 import './call-control.styles.scss';
 import {PopoverNext, TooltipNext, Text, ButtonCircle} from '@momentum-ui/react-collaboration';
 import {Icon, Button, Select, Option} from '@momentum-design/components/dist/react';
 import ConsultTransferPopoverComponent from './CallControlCustom/consult-transfer-popover';
 import AutoWrapupTimer from '../AutoWrapupTimer/AutoWrapupTimer';
 import type {MEDIA_CHANNEL as MediaChannelType} from '../task.types';
 import {getMediaTypeInfo} from '../../../utils';
+import {DestinationType} from '@webex/cc-store';
 import {
   RESUME_CALL,
   HOLD_CALL,

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

@@ -57,7 +57,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const mediaChannel = currentTask.data.interaction.mediaType as MediaChannelType;
   const isSocial = mediaChannel === MediaChannelType.SOCIAL;
   const isTelephony = mediaChannel === MediaChannelType.TELEPHONY;
+
+  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
   const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName;
+
+  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
   const ani = currentTask?.data?.interaction?.callAssociatedDetails?.ani;
 
   // Create unique IDs for tooltips
@@ -187,12 +191,24 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
         <div className="cad-variables">
           <Text className="queue" type="body-secondary" tagName={'small'}>
             <strong>{QUEUE}</strong>{' '}
-            <span>{currentTask?.data?.interaction?.callAssociatedDetails?.virtualTeamName || NO_TEAM_NAME}</span>
+            <span>
+              {
+                //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
+
+                currentTask?.data?.interaction?.callAssociatedDetails?.virtualTeamName || NO_TEAM_NAME
+              }
+            </span>
           </Text>
           {renderPhoneNumber()}
           <Text className="rona" type="body-secondary" tagName={'small'}>
             <strong>{RONA}</strong>{' '}
-            <span>{currentTask?.data?.interaction?.callAssociatedDetails?.ronaTimeout || NO_RONA}</span>
+            <span>
+              {
+                //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
+
+                currentTask?.data?.interaction?.callAssociatedDetails?.ronaTimeout || NO_RONA
+              }
+            </span>
           </Text>
         </div>
       </div>

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

@@ -8,6 +8,7 @@ const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps>
     return <></>; // hidden component
   }
 
+  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
   const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
   const ani = callAssociationDetails?.ani;
   const customerName = callAssociationDetails?.customerName;

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

@@ -12,6 +12,7 @@ const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (prop
   return (
     <ul className="task-list" data-testid="task-list">
       {Object.values(taskList)?.map((task, index) => {
+        //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762IT
         const callAssociationDetails = task?.data?.interaction?.callAssociatedDetails;
         const ani = callAssociationDetails?.ani;
         const customerName = callAssociationDetails?.customerName;

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

@@ -2,7 +2,7 @@ import {
   ILogger,
   ITask,
   IContactCenter,
-  WrapupCodes,
+  IWrapupCode,
   BuddyDetails,
   DestinationType,
   ContactServiceQueue,
@@ -173,7 +173,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.
@@ -503,8 +503,6 @@ export interface CallControlConsultComponentsProps {
  */
 export type CallControlMenuType = 'Consult' | 'Transfer';
 
-export {DestinationType};
-
 export const MEDIA_CHANNEL = {
   EMAIL: 'email',
   CHAT: 'chat',

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

@@ -13,13 +13,10 @@ const WebUserState = r2wc(UserStateComponent, {
     idleCodes: 'json',
     setAgentStatus: 'function',
     isSettingAgentStatus: 'boolean',
-    errorMessage: 'string',
     elapsedTime: 'number',
     lastIdleStateChangeElapsedTime: 'number',
     currentState: 'string',
     customState: 'json',
-    currentTheme: 'string',
-    onStateChange: 'function',
     logger: 'function',
   },
 });