@webex/cc-components 1.28.0-next.32 → 1.28.0-next.33

package/dist/types/components/task/CampaignErrorDialog/campaign-error-dialog.types.d.ts

@@ -1,4 +1,4 @@
-export type CampaignErrorType = 'ACCEPT_FAILED' | 'SKIP_FAILED' | 'REMOVE_FAILED';
+export type CampaignErrorType = 'ACCEPT_FAILED' | 'SKIP_FAILED' | 'REMOVE_FAILED' | 'CANCEL_FAILED';
 export interface CampaignErrorDialogProps {
     errorType: CampaignErrorType;
     isOpen: boolean;

package/dist/types/components/task/CampaignTask/CampaignTaskListItem/campaign-task-list-item.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CampaignTaskListItemProps } from '../../task.types';
+/**
+ * CampaignTaskListItem renders the ListItem row shared between the
+ * CampaignTask inline card and the CampaignTaskPopover.
+ *
+ * Layout: Avatar | Title / Phone / Countdown | Accept + Skip/Remove buttons
+ */
+declare const CampaignTaskListItem: React.FC<CampaignTaskListItemProps>;
+export default CampaignTaskListItem;

package/dist/types/components/task/CampaignTask/CampaignTaskPopover/campaign-task-popover.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CampaignTaskPopoverProps } from '../../task.types';
+import './campaign-task-popover.style.scss';
+declare const CampaignTaskPopover: React.FC<CampaignTaskPopoverProps>;
+export default CampaignTaskPopover;

package/dist/types/components/task/CampaignTask/campaign-task.d.ts

@@ -0,0 +1,3 @@
+import './campaign-task.style.scss';
+declare const CampaignTaskWithMetrics: any;
+export default CampaignTaskWithMetrics;

package/dist/types/components/task/GlobalVariablesPanel/global-variables-panel.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { GlobalVariablesPanelProps } from '../task.types';
+import './global-variables-panel.style.scss';
+/**
+ * GlobalVariablesPanel renders agent-viewable global variables in a scrollable
+ * glass overlay panel.  Used by CampaignTask (inline card),
+ * CampaignTaskPopover (hover popover), and CallControlCAD.
+ *
+ * Supports two layout modes:
+ *  - `single-column` (default) — one variable per row
+ *  - `two-column` — two variables per row (matching the Figma popover design)
+ */
+declare const GlobalVariablesPanel: React.FC<GlobalVariablesPanelProps>;
+export default GlobalVariablesPanel;

package/dist/types/components/task/TaskList/task-list.utils.d.ts

@@ -1,5 +1,39 @@
-import { TaskListItemData } from '../task.types';
+import { TaskListItemData, CampaignCallProcessingDetails } from '../task.types';
 import { ILogger, ITask } from '@webex/cc-store';
+/**
+ * Extract the agent's joinTimestamp from the task participants.
+ * Looks up the agent by `agentId` so that we always read the correct
+ * participant even when multiple participants have joined.
+ * Returns `undefined` when the agent hasn't joined yet.
+ */
+export declare const getAgentJoinTimestamp: (task: ITask, agentId?: string) => number | undefined;
+/**
+ * Safely extracts campaign-specific call processing details from a task.
+ * Returns an empty object when `cpd` is undefined.
+ */
+export declare const getCampaignCpd: (cpd: Record<string, unknown> | undefined) => CampaignCallProcessingDetails;
+/**
+ * Determines whether a task is a campaign preview interaction.
+ *
+ * Consistent with the agent desktop logic that checks both
+ * `interaction.outboundType` and `callProcessingDetails.campaignType`.
+ */
+export declare const isCampaignPreviewTask: (task: ITask) => boolean;
+/**
+ * Determines whether the agent has joined the interaction.
+ *
+ * Matches the agent desktop logic:
+ * `taskMap[id]?.interaction.participants[agentId]?.hasJoined`
+ *
+ * The SDK types `participants` as `any`; at runtime it is
+ * `Record<string, { hasJoined?: boolean; ... }>`.
+ */
+export declare const hasAgentJoinedTask: (task: ITask, agentId: string | undefined) => boolean;
+/**
+ * Returns the interactionId of the most recent active campaign preview task
+ * that the agent has joined. Only one campaign preview should be visible at a time.
+ */
+export declare const getActiveCampaignPreviewId: (tasks: ITask[], agentId: string | undefined) => string | null;
 /**
  * Extracts and processes data from a task for rendering in the task list
  * @param task - The task object

package/dist/types/components/task/constants.d.ts

@@ -34,3 +34,16 @@ export declare const PHONE_NUMBER = "Phone Number:";
 export declare const CUSTOMER_NAME = "Customer Name";
 export declare const RONA = "RONA:";
 export declare const TIME_LEFT = "Time left:";
+export declare const CAMPAIGN_ACCEPT = "Accept";
+export declare const CAMPAIGN_CONNECTING = "Connecting...";
+export declare const CAMPAIGN_SKIP = "Skip";
+export declare const CAMPAIGN_SKIP_TOOLTIP = "Skip this contact";
+export declare const CAMPAIGN_SKIP_DISABLED_TOOLTIP = "Can't skip this contact";
+export declare const CAMPAIGN_REMOVE = "Remove";
+export declare const CAMPAIGN_REMOVE_TOOLTIP = "Remove this contact";
+export declare const CAMPAIGN_REMOVE_DISABLED_TOOLTIP = "Can't remove this contact";
+export declare const CAMPAIGN_TASK_REGION_LABEL = "Campaign preview contact";
+export declare const GLOBAL_VARIABLES_LABEL = "Contact details";
+export declare const CAMPAIGN_ACTIONS_LABEL = "Campaign actions";
+export declare const HANDLE_TIME = "Handle Time:";
+export declare const CAMPAIGN_CALL = "Campaign call";

package/dist/types/components/task/task.types.d.ts

@@ -1,4 +1,5 @@
 import { ILogger, ITask, IContactCenter, IWrapupCode, BuddyDetails, DestinationType, ContactServiceQueue, AddressBookEntry, EntryPointRecord, FetchPaginatedList, Participant, AddressBookEntrySearchParams, AddressBookEntriesResponse } from '@webex/cc-store';
+import { CampaignErrorType } from './CampaignErrorDialog/campaign-error-dialog.types';
 type Enum<T extends Record<string, unknown>> = T[keyof T];
 /**
  * Represents a single Call Associated Data (CAD) variable on an interaction.
@@ -134,9 +135,22 @@ export interface TaskProps {
      * Flag to enable decline button on incoming task component
      */
     isDeclineButtonEnabled?: boolean;
+    /**
+     * Flag to enable campaign preview task rendering.
+     * When true and the task is a campaign preview interaction,
+     * the CampaignTask component is rendered instead of the normal Task.
+     * Defaults to true.
+     */
+    hasCampaignPreviewEnabled?: boolean;
+    /**
+     * Set of interaction IDs for campaign previews that have been accepted.
+     * Managed by the store — survives component remounts caused by
+     * transient task-list updates during the accept transition.
+     */
+    acceptedCampaignIds?: Set<string>;
 }
 export type IncomingTaskComponentProps = Pick<TaskProps, 'isBrowser' | 'accept' | 'reject' | 'logger'> & Partial<Pick<TaskProps, 'incomingTask' | 'isDeclineButtonEnabled'>>;
-export type TaskListComponentProps = Pick<TaskProps, 'isBrowser' | 'acceptTask' | 'declineTask' | 'onTaskSelect' | 'logger' | 'agentId'> & Partial<Pick<TaskProps, 'currentTask' | 'taskList'>>;
+export type TaskListComponentProps = Pick<TaskProps, 'isBrowser' | 'acceptTask' | 'declineTask' | 'onTaskSelect' | 'logger' | 'agentId' | 'cc'> & Partial<Pick<TaskProps, 'currentTask' | 'taskList' | 'hasCampaignPreviewEnabled' | 'acceptedCampaignIds'>>;
 export interface RealTimeTranscriptEntry {
     id: string;
     speaker: string;
@@ -424,7 +438,14 @@ export interface ControlProps {
      */
     agentId: string;
 }
-export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'wrapupCodes' | 'toggleHold' | 'toggleRecording' | 'toggleMute' | 'isMuted' | 'endCall' | 'wrapupCall' | 'isRecording' | 'setIsRecording' | 'buddyAgents' | 'loadingBuddyAgents' | 'loadBuddyAgents' | 'transferCall' | 'consultCall' | 'consultConference' | 'switchToMainCall' | 'switchToConsult' | 'exitConference' | 'endConsultCall' | 'consultTransfer' | 'callControlAudio' | 'consultAgentName' | 'setConsultAgentName' | 'holdTime' | 'callControlClassName' | 'callControlConsultClassName' | 'startTimestamp' | 'stateTimerLabel' | 'stateTimerTimestamp' | 'consultTimerLabel' | 'consultTimerTimestamp' | 'allowConsultToQueue' | 'lastTargetType' | 'setLastTargetType' | 'controlVisibility' | 'logger' | 'secondsUntilAutoWrapup' | 'cancelAutoWrapup' | 'conferenceParticipants' | 'getAddressBookEntries' | 'getEntryPoints' | 'getQueuesFetcher' | 'consultTransferOptions'>;
+export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'wrapupCodes' | 'toggleHold' | 'toggleRecording' | 'toggleMute' | 'isMuted' | 'endCall' | 'wrapupCall' | 'isRecording' | 'setIsRecording' | 'buddyAgents' | 'loadingBuddyAgents' | 'loadBuddyAgents' | 'transferCall' | 'consultCall' | 'consultConference' | 'switchToMainCall' | 'switchToConsult' | 'exitConference' | 'endConsultCall' | 'consultTransfer' | 'callControlAudio' | 'consultAgentName' | 'setConsultAgentName' | 'holdTime' | 'callControlClassName' | 'callControlConsultClassName' | 'startTimestamp' | 'stateTimerLabel' | 'stateTimerTimestamp' | 'consultTimerLabel' | 'consultTimerTimestamp' | 'allowConsultToQueue' | 'lastTargetType' | 'setLastTargetType' | 'controlVisibility' | 'logger' | 'secondsUntilAutoWrapup' | 'cancelAutoWrapup' | 'conferenceParticipants' | 'getAddressBookEntries' | 'getEntryPoints' | 'getQueuesFetcher' | 'consultTransferOptions'> & {
+    /**
+     * Whether the current task is an accepted campaign preview call.
+     * When `true`, the header renders the campaign icon and
+     * "Campaign call" label instead of the standard media type.
+     */
+    isCampaignCall?: boolean;
+};
 export type OutdialAniEntry = {
     /** Unique identifier for the ANI entry */
     id: string;
@@ -724,4 +745,203 @@ export interface ButtonConfig {
     disabled?: boolean;
     isVisible: boolean;
 }
+/**
+ * Properties for the GlobalVariablesPanel component.
+ */
+export interface GlobalVariablesPanelProps {
+    /**
+     * List of agent-viewable global variables to display.
+     */
+    variables: CADVariable[];
+    /**
+     * Optional CSS class name for additional styling.
+     */
+    className?: string;
+    /**
+     * Layout mode for the variables grid.
+     * - `single-column`: one variable per row (used in the inline card)
+     * - `two-column`: two variables per row (used in the popover)
+     * @default 'single-column'
+     */
+    layout?: 'single-column' | 'two-column';
+    /**
+     * CSS background value for the panel container.
+     * @default 'var(--mds-color-theme-background-glass-normal)'
+     */
+    panelBackground?: string;
+}
+/**
+ * Auto-action to perform when the campaign preview offer times out.
+ * Matches the values from callProcessingDetails.campaignPreviewAutoAction.
+ */
+export type CampaignAutoAction = 'ACCEPT' | 'SKIP' | 'REMOVE';
+/**
+ * Maps a CampaignAutoAction to the corresponding CampaignErrorType
+ * used when the auto-action or manual action fails.
+ */
+export declare const CAMPAIGN_ACTION_ERROR_MAP: Record<CampaignAutoAction, CampaignErrorType>;
+/**
+ * Keys of CAMPAIGN_ACTION_ERROR_MAP — used to type the error handler in CampaignTask.
+ */
+export type CampaignErrorActionType = keyof typeof CAMPAIGN_ACTION_ERROR_MAP;
+/**
+ * Campaign-specific fields on `callProcessingDetails`.
+ *
+ * These fields are present at runtime on campaign preview reservation
+ * events but are not yet part of the installed SDK type definitions.
+ * This bridge type can be removed once the SDK package is updated.
+ */
+export interface CampaignCallProcessingDetails {
+    /** Campaign name (not UUID) */
+    campaignId?: string;
+    /** Campaign type (e.g. 'preview_standard', 'preview_direct') */
+    campaignType?: string;
+    /** Indicates if the skip action is disabled for campaign preview contacts */
+    campaignPreviewSkipDisabled?: string;
+    /** Indicates if the remove action is disabled for campaign preview contacts */
+    campaignPreviewRemoveDisabled?: string;
+    /** Auto-action to perform when campaign preview offer times out (ACCEPT, SKIP, REMOVE) */
+    campaignPreviewAutoAction?: string;
+    /** Timestamp (ms) when the campaign preview offer expires */
+    campaignPreviewOfferTimeout?: string;
+}
+/**
+ * Properties for the CampaignTask component.
+ *
+ * The component renders campaign preview contact details, action buttons
+ * (Accept / Skip / Remove), a countdown timer, and an error dialog.
+ * When the countdown expires the configured auto-action is triggered.
+ *
+ * Following the pattern used by the Task component, SDK operations are
+ * passed in as callback props rather than passing the cc instance directly.
+ */
+export interface CampaignTaskProps {
+    /**
+     * The campaign preview task (AgentOfferCampaignReservation).
+     * Campaign metadata is read from `task.data.interaction.callProcessingDetails`.
+     */
+    task: ITask;
+    /**
+     * Accepts the campaign preview contact and initiates the outbound call.
+     * Wraps `cc.acceptPreviewContact({ interactionId, campaignId })`.
+     */
+    acceptPreviewContact: () => Promise<void>;
+    /**
+     * Skips the campaign preview contact and moves to the next one.
+     * Wraps `cc.skipPreviewContact({ interactionId, campaignId })`.
+     */
+    skipPreviewContact: () => Promise<void>;
+    /**
+     * Removes the campaign preview contact from the campaign list.
+     * Wraps `cc.removePreviewContact({ interactionId, campaignId })`.
+     */
+    removePreviewContact: () => Promise<void>;
+    /**
+     * Cancels the campaign preview call by ending the task.
+     * Wraps `task.end()`.
+     */
+    cancelPreviewContact: () => Promise<void>;
+    /**
+     * Whether the agent is logged in with a Browser (WebRTC) device.
+     * When true the Cancel button is rendered so the agent can end the
+     * WebRTC call.  For AGENT_DN the phone handles hangup, so the Cancel
+     * button is hidden — consistent with Agent Desktop behaviour.
+     */
+    isBrowser?: boolean;
+    /**
+     * Logger instance for logging purposes.
+     */
+    logger?: ILogger;
+    /**
+     * Whether this campaign preview has been accepted.
+     * Driven by the store's `acceptedCampaignIds` set — survives component
+     * remounts caused by transient task-list updates during the accept
+     * transition.  When `true`, action buttons and countdown are hidden
+     * and the handle-time timer is shown instead.
+     */
+    isAccepted?: boolean;
+    /**
+     * The logged-in agent's ID.  Used to look up the agent's participant
+     * entry when reading `joinTimestamp` for the handle-time timer.
+     */
+    agentId?: string;
+}
+/**
+ * Properties for the CampaignTaskPopover component.
+ *
+ * Displays a hover popover over the campaign preview task with the
+ * ListItem row (avatar, title, phone, countdown, action buttons)
+ * and a two-column scrollable data panel of global variables.
+ */
+export interface CampaignTaskPopoverProps {
+    /** The campaign preview task. */
+    task: ITask;
+    /** Logger instance for logging purposes. */
+    logger?: ILogger;
+    /** ID of the trigger element that opens the popover on hover. */
+    triggerId: string;
+    /** Whether the Accept button has been clicked (shows "Connecting..." state). */
+    isAcceptClicked: boolean;
+    /** Whether the campaign preview has been accepted by the backend (call controls visible). */
+    isAccepted: boolean;
+    /** Whether the Accept button is disabled. */
+    isAcceptDisabled: boolean;
+    /** Whether the Skip button is disabled. */
+    isSkipDisabled: boolean;
+    /** Whether the Remove button is disabled. */
+    isRemoveDisabled: boolean;
+    /** Handler for Accept button click. */
+    onAccept: () => void;
+    /** Handler for Skip button click. */
+    onSkip: () => void;
+    /** Handler for Remove button click. */
+    onRemove: () => void;
+    /** Handler for countdown timeout. */
+    onTimeout: () => void;
+    /** Timestamp (ms) when the campaign call was accepted — used for the handle time timer. */
+    handleTimestamp?: number;
+}
+/**
+ * Properties for the CampaignTaskListItem component.
+ *
+ * Renders the ListItem row shared between the CampaignTask card
+ * and CampaignTaskPopover: avatar, title, phone, countdown, and
+ * Accept / Skip / Remove action buttons.
+ */
+export interface CampaignTaskListItemProps {
+    /** Display title (customer name or caller identifier). */
+    title: string;
+    /** Phone number to show as secondary label. */
+    phoneNumber?: string;
+    /** Customer name — used to decide whether to show phone as secondary label. */
+    customerName?: string;
+    /** Campaign preview offer timeout timestamp (ms string). */
+    timeoutTimestamp?: string;
+    /** Whether the Accept button has been clicked (shows "Connecting..." state). */
+    isAcceptClicked: boolean;
+    /** Whether the campaign preview has been accepted by the backend (call controls visible). */
+    isAccepted: boolean;
+    /** Whether the Accept button is disabled. */
+    isAcceptDisabled: boolean;
+    /** Whether the Skip button is disabled. */
+    isSkipDisabled: boolean;
+    /** Whether the Remove button is disabled. */
+    isRemoveDisabled: boolean;
+    /** Handler for Accept button click. */
+    onAccept: () => void;
+    /** Handler for Skip button click. */
+    onSkip: () => void;
+    /** Handler for Remove button click. */
+    onRemove: () => void;
+    /** Handler for countdown timeout. */
+    onTimeout: () => void;
+    /** Timestamp (ms) when the campaign call was accepted — used for the handle time timer. */
+    handleTimestamp?: number;
+    /** Logger instance. */
+    logger?: ILogger;
+    /** Optional CSS class name applied to the ListItem. */
+    className?: string;
+    /** Optional test ID prefix for data-testid attributes. */
+    testIdPrefix?: string;
+}
 export {};

package/dist/types/index.d.ts

@@ -7,8 +7,9 @@ import TaskListComponent from './components/task/TaskList/task-list';
 import OutdialCallComponent from './components/task/OutdialCall/outdial-call';
 import CampaignErrorDialogComponent from './components/task/CampaignErrorDialog/campaign-error-dialog';
 import CampaignCountdownComponent from './components/task/CampaignCountdown/campaign-countdown';
+import CampaignTaskComponent from './components/task/CampaignTask/campaign-task';
 import RealTimeTranscriptComponent from './components/task/RealTimeTranscript/real-time-transcript';
-export { UserStateComponent, StationLoginComponent, CallControlComponent, CallControlCADComponent, IncomingTaskComponent, TaskListComponent, OutdialCallComponent, CampaignErrorDialogComponent, CampaignCountdownComponent, RealTimeTranscriptComponent, };
+export { UserStateComponent, StationLoginComponent, CallControlComponent, CallControlCADComponent, IncomingTaskComponent, TaskListComponent, OutdialCallComponent, CampaignErrorDialogComponent, CampaignCountdownComponent, CampaignTaskComponent, RealTimeTranscriptComponent, };
 export * from './components/StationLogin/constants';
 export * from './components/StationLogin/station-login.types';
 export * from './components/UserState/user-state.types';