twilio-cti-flex

A javascript library

Projects in this solution:

• twilio-cti
  • expose flex part for integration

FLEX:

• Code sample for flex plugin integration

import { Flex as F, Method, Channel, MessageStatus, TaskType, TaskDirection, mapAgentFromWorker } from "twilio-cti";

// logger
const logger = { 
  debug: (...args: any[]) => console.log('log', ...args) 
};

try {
    const f = new F('https://local-crm.twilio-cti.com', logger);

    f
        .on(Method.SUBSCRIBE, (data: any) => {
            const state = manager.store.getState();

            // Handle callback for agent subscription
            if(data.channel === Channel.AGENT) {
                const agent = mapAgentFromWorker(state.flex.worker);

                f.invokeApiCall({
                        method: Method.CALLBACK,
                        channel: data.channel,
                        id: data.id,
                        attributes: agent,
                        status: MessageStatus.SUCCESS
                    });
            }
        })
        .on(Method.PUBLISH, (data: any) => {
            // Catch task publish message to make outboud call
            if(data.channel === Channel.TASK) {
                if(data.attributes.type === TaskType.CALL && data.attributes.direction === TaskDirection.OUTBOUND) {
                        // Callback message
                        const message = {
                            method: Method.CALLBACK,
                            channel: data.channel,
                            id: data.id,
                            attributes: data.attributes
                        }

                        makeCall(data.attributes.attributes.to)
                        .then(() => {
                            message.status = MessageStatus.SUCCESS;
                            f.invokeApiCall(message);
                        })
                        .catch((error: any) => {
                            message.status = MessageStatus.ERROR;
                            f.invokeApiCall(message);
                    });
                }
            }
        });
}
catch (error) {
    console.log(error);
}

flex will also be exposed on window.twilio.flex

import { combineReducers } from "redux";


// Combine the reducers
export default combineReducers({
  crm: (state = {}, action: any) => {
    return (window as any).twilio?.flex?.reduce(state, action) ?? state;
  },
});