@twilio/flex-ui/src/TaskChannelDefinition.d.ts

Twilio Flex UI

import { BadgeVariants, ContentFragmentProps, Notification, NotificationEventListener, RemoveComponentCallOptions } from "./flex-ui-core/src";
import { ReservationStatuses } from "./internal-flex-commons/src";
import * as React from "react";
import * as FlexComponents from "./components";
import { ITask } from "./models";
import { AppState } from "./state/AppState";
type Target = keyof typeof FlexComponents;
/**
 * Task channel capabilities
 * @enum {"Info" | "Call" | "Chat" | "Video" | "Wrapup"} TaskChannelCapability
 * @property {"Info"} "Info" - whether channel has info panel
 * @property {"Call"} "Call" - whether channel has call canvas capabilities
 * @property {"Chat"} "Chat" - whether channel has chat canvas capabilities
 * @property {"Video"} "Video" - whether channel has video calling capabilities
 * @property {"Wrapup"} "Wrapup" - whether channel needs to go to Wrapup state before can be completed
 * @memberof TaskChannelDefinition
 */
export declare enum TaskChannelCapability {
    Info = "Info",// whether channel has info panel
    Call = "Call",// whether channel has call canvas capabilities
    Chat = "Chat",// whether channel has chat canvas capabilities
    Video = "Video",// whether channel has video calling capabilities
    Wrapup = "Wrapup"
}
/**
 * Callback to provide values for Flex. Called from various areas of Flex.
 * @callback TaskCallbackType
 * @param {ITask} task task
 * @param {React.ComponentType} componentType caller component type. One of Flex React components.
 * @param {Array<any>} [args] optional arguments
 * @returns {T} value to be used
 * @memberof TaskStatusBasedType
 * @template T
 * @example
 * import { TaskCallbackType } from "@twilio/flex-ui";
 * const componentCallback: TaskCallbackType<React.ReactNode> = (task, DefaultComponent, TaskAcceptedComponent) => {
 *   if (task.status === "accepted") {
 *     return <TaskAcceptedComponent />;
 *   }
 *   return <DefaultComponent />;
 * };
 */
export type TaskCallbackType<T> = (task: ITask, componentType: React.ComponentType, ...args: Array<any>) => T;
export { ReservationStatuses };
/**
 * TaskStatusBasedTypeBase is an object with ReservationStatus as its key and the parameter type T as the value.
 * @typedef {T} TaskStatusBasedTypeBase
 * @property {ReservationStatuses} [reservationStatus] the T value associated with the reservationStatus
 * @memberof TaskStatusBasedType
 * @template T
 */
export type TaskStatusBasedTypeBase<T> = {
    [key in ReservationStatuses]?: T;
};
/**
 * Used to define a value based on task status. TaskStatusBasedType accepts a type parameter T which defaults to string.
 *
 * The valid types are: T, TaskCallbackType<T> and TaskStatusBasedTypeBase<T><br>
 * - T is a generic type.<br>
 * - TaskCallbackType is a function to provide values for Flex. Called from various areas of Flex.<br>
 * - TaskStatusBasedTypeBase is an object with ReservationStatus as its key and the parameter type T as the value.
 * @interface TaskStatusBasedType
 * @category Framework / Channels
 * @template T
 * @example
 * import { TaskStatusBasedType, TaskCallbackType, TaskStatusBasedTypeBase } from "@twilio/flex-ui";
 *
 * const taskHeaderStatus: TaskStatusBasedType = "Live | {{helper.durationSinceUpdate}}";
 *
 * const statusMap: TaskStatusBasedTypeBase = {
 *   Assigned: "assigned",
 *   Wrapping: "wrapping"
 * };
 * const header = statusMap[task.status];
 *
 * const componentCallback: TaskCallbackType<React.ReactNode> = (task, DefaultComponent, TaskAcceptedComponent) => {
 *   if (task.status === "accepted") {
 *     return <TaskAcceptedComponent />;
 *   }
 *   return <DefaultComponent />;
 * }
 */
export type TaskStatusBasedType<T = string> = T | TaskCallbackType<T> | TaskStatusBasedTypeBase<T>;
/**
 * @callback TaskChannelApplicableCb
 * @param {ITask} task task to evaluate applicability for
 * @returns {boolean} true if task channel is applicable for given task
 * @memberof TaskChannelDefinition
 * @example
 * import { TaskChannelApplicableCb } from "@twilio/flex-ui";
 * const isCallTask: TaskChannelApplicableCb = (task) => task.taskChannelUniqueName === "voice";
 */
export type TaskChannelApplicableCb = (task: ITask) => boolean;
/**
 * @typedef {object} TaskChannelComponentRegistration
 * @property {string} target of a Flex component. Component must have static "Content" property.
 * @property {React.ReactChild} component component to register
 * @property {ContentFragmentProps} options properties for component registration
 * @memberof TaskChannelDefinition
 */
export type TaskChannelComponentRegistration = {
    target: Target;
    component: React.ReactChild;
    options?: ContentFragmentProps;
};
/**
 * @typedef {object} TaskChannelComponentRemoveRequest
 * @property {string} target of a Flex component. Component must have static "Content" property.
 * @property {string} key key of a component to remove
 * @property {ContentFragmentProps} options properties for component removal.
 * @memberof TaskChannelDefinition
 */
export type TaskChannelComponentRemoveRequest = {
    target: Target;
    key: React.Key;
    options?: RemoveComponentCallOptions;
};
export type TaskSoundData = {
    url: string;
    repeatable: boolean;
};
/**
 * @typedef {TaskStatusBasedTypeBase} TaskSounds
 * @memberof TaskChannelDefinition
 */
export type TaskSounds = TaskStatusBasedTypeBase<TaskSoundData>;
/**
 * Notification override
 * @typedef { Partial<Notification> | NotificationEventListener | null } NotificationOverride
 * @memberof TaskChannelDefinition
 */
export type NotificationOverride = Partial<Notification> | NotificationEventListener | null;
/**
 * Notification overrides matched to notification ids.
 * @typedef TaskChannelNotificationOverrides
 * @property {NotificationOverride} [NotificationId] overrides for NotificationId
 * @memberof TaskChannelDefinition
 */
export type NotificationOverrides = {
    [notificationId: string]: NotificationOverride;
};
/**
 * @typedef TaskChannelNotificationOptions
 * @property {NotificationOverride} override Map of notification overrides
 * @memberof TaskChannelDefinition
 */
export type TaskChannelNotificationOptions = {
    override: NotificationOverrides;
};
/**
 * Interface to define a task channel for Flex
 * @typedef TaskChannelDefinition
 * @property {string} name name of the task channel definition
 * @property {TaskChannelApplicableCb} isApplicable Callback to determine whether this task channel is applicable for a given task.
 * @property {Set<TaskChannelCapability>} capabilities capabilities of task channel
 * @property {number} charLimit message character limit for task channel with chat capabilities
 * @property {object} [colors] colors to be used
 * @property {TaskStatusBasedType} [colors.main] main color code as string to use in TaskList, TaskCard, Canvases
 * @property {TaskChannelDefinition.TaskSounds} [sounds] sounds to be used for specific tasks
 * @property {object} [icons] icons to render for the task channel
 * @property {TaskStatusBasedType} [icons.list] list icon to be used in TaskList and TaskCardList
 * @property {TaskStatusBasedType} [icons.main] icon to be used in Tab headers if tab is not selected
 * @property {TaskStatusBasedType} [icons.active] icon to be used in Tab headers if tab is selected and in Task Canvases as the main icon
 * @property {object} [templates] template strings for components
 * @property {object} [templates.IncomingTaskCanvas] templates for IncomingTaskCanvas
 * @property {TaskStatusBasedType} [templates.IncomingTaskCanvas.firstLine] first line
 * @property {TaskStatusBasedType} [templates.IncomingTaskCanvas.secondLine] second line
 * @property {object} [templates.CallCanvas] templates for CallCanvas
 * @property {TaskStatusBasedType} [templates.CallCanvas.firstLine] first line
 * @property {TaskStatusBasedType} [templates.CallCanvas.secondLine] second line
 * @property {object} [templates.TaskListItem] templates for TaskListItem
 * @property {TaskStatusBasedType} [templates.TaskListItem.firstLine] first line
 * @property {TaskStatusBasedType} [templates.TaskListItem.secondLine] second line
 * @property {TaskStatusBasedType} [templates.TaskListItem.extraInfo] extra info to be shown
 * @property {object} [templates.TaskCanvasHeader] templates for TaskCanvasHeader
 * @property {TaskStatusBasedType} [templates.TaskCanvasHeader.title] title
 * @property {TaskStatusBasedType} [templates.TaskCanvasHeader.endButton] end button text
 * @property {object} [templates.TaskCard] templates for TaskCard
 * @property {TaskStatusBasedType} [templates.TaskCard.firstLine] first line
 * @property {TaskStatusBasedType} [templates.TaskCard.secondLine] second line
 * @property {object} [templates.TaskInfoPanel] templates for TaskInfoPanel
 * @property {TaskStatusBasedType} [templates.TaskInfoPanel.content] content of the panel
 * @property {object} [templates.Supervisor] templates for components for supervisors
 * @property {object} [templates.Supervisor.TaskCanvasHeader] templates for Supervisor.TaskCanvasHeader
 * @property {TaskStatusBasedType} [templates.Supervisor.TaskCanvasHeader.title] title
 * @property {TaskStatusBasedType} [templates.Supervisor.TaskCanvasHeader.endButton] end button text
 * @property {object} [templates.Supervisor.TaskInfoPanel] templates for Supervisor.TaskInfoPanel
 * @property {TaskStatusBasedType} [templates.Supervisor.TaskInfoPanel.content] content of the panel
 * @property {object} [templates.Supervisor.TaskOverviewCanvas] templates for Supervisor.TaskOverviewCanvas
 * @property {TaskStatusBasedType} [templates.Supervisor.TaskOverviewCanvas.firstLine] first line
 * @property {TaskStatusBasedType} [templates.Supervisor.TaskOverviewCanvas.secondLine] second line
 * @property {Array<TaskChannelComponentRegistration>} [addedComponents] components to be added for task channel
 * @property {Array<TaskChannelComponentRegistration>} [replacedComponents] components to be replaced for task channel
 * @property {Array<TaskChannelComponentRemoveRequest>} [removedComponents] component removal request for task channel
 * @property {object} componentProps Object of task-channel specific components props
 * @property {TaskChannelNotificationOptions} [notifications] Notification properties
 * @category Framework / Channels
 */
export interface TaskChannelDefinition {
    _registrationCallbacks?: Array<Function>;
    name: string;
    colors?: {
        main?: TaskStatusBasedType<string>;
    };
    sounds?: TaskSounds;
    isApplicable: TaskChannelApplicableCb;
    icons?: {
        list?: TaskStatusBasedType<string | React.ReactNode>;
        main?: TaskStatusBasedType<string | React.ReactNode>;
        active?: TaskStatusBasedType<string | React.ReactNode>;
    };
    templates?: {
        IncomingTaskCanvas?: {
            titleLine?: TaskStatusBasedType<string>;
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        ConnectingOutboundCallCanvas?: {
            titleLine?: TaskStatusBasedType<string>;
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        CallCanvas?: {
            titleLine?: TaskStatusBasedType<string>;
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        TaskListItem?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
            extraInfo?: TaskStatusBasedType<string>;
        };
        TaskCanvasHeader?: {
            title?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
            endButton?: TaskStatusBasedType<string>;
        };
        TaskCard?: {
            firstLine?: TaskStatusBasedType<string>;
            secondLine?: TaskStatusBasedType<string>;
        };
        TaskInfoPanel?: {
            content: TaskStatusBasedType<string>;
        };
        TaskCanvasTabs?: {
            contentTabHeader?: TaskStatusBasedType<string>;
        };
        Supervisor?: {
            TaskCanvasHeader?: {
                title?: TaskStatusBasedType<string>;
                secondLine?: TaskStatusBasedType<string>;
                endButton?: TaskStatusBasedType<string>;
            };
            TaskInfoPanel?: {
                content: TaskStatusBasedType<string>;
            };
            TaskOverviewCanvas: {
                firstLine?: TaskStatusBasedType<string>;
                secondLine?: TaskStatusBasedType<string>;
            };
        };
    };
    capabilities: Set<TaskChannelCapability>;
    charLimit: number;
    componentProps: {
        TaskListItem?: {
            Badge?: {
                children: number | ((state: AppState, props: {}) => number);
                variant: BadgeVariants | ((state: AppState, props: {}) => BadgeVariants);
            };
        };
        [componentName: string]: {
            [propName: string]: any;
        } | undefined;
    };
    addedComponents?: Array<TaskChannelComponentRegistration>;
    replacedComponents?: Array<TaskChannelComponentRegistration>;
    removedComponents?: Array<TaskChannelComponentRemoveRequest>;
    notifications: TaskChannelNotificationOptions;
}