Disconnect or reject an incoming call from the Fusion application or the toolbar application

Now you set up functionality to reject an incoming call or, disconnect the accepted call.

You can reject or disconnect a call from your media toolbar application and from the Fusion application.

Overview of the tasks

Here's an overview of what you need to do:

• Part 1: Rejecting/disconnecting a call from your media toolbar application
  1. Add an event handler for the Disconnect button click event.
  2. Define the callDisconnectedEventHandler function.
  3. Define the functions disconnectCall and rejectCall in the integrationActionHandler.ts file.
  4. Implement the rejectCall() and hangupCall() functions in the vendorHandler.ts file based on your CTI supplier's SDK.
  5. Define the function notifyCallDisconnectedToFusion in the fusionHandler.ts file.
• Part 2: Rejecting or disconnecting a call from the Fusion application
  1. Add cases for reject and disconnect to listenToToolbarInteractionCommandsFromFusion in the integrationEventsHandler.ts file.

Part 1: Rejecting or disconnecting a call from your media toolbar application

Once the agent clicks on the Reject or Disconnect button, the call-panel component fires an event notifying its container where the component is loaded. In our case, the component is loaded in the media toolbar application. An event is similarly fired when the Reject button is selected. When a call is disconnected before the call is accepted by the agent, an event with the payload disconnectionState as REJECT is fired and when a call is disconnected after the call is accepted by the agent, an event with payload disconnectionState as WRAPUP is fired.

From the container, an event handler must be defined to handle these events.

The following diagram shows the sequence of actions to be performed when the agent accepts the call from the media toolbar application:

Here's the agent call flow:

1. The agent clicks on the Reject button from the media toolbar application.
2. The Partner application notifies the CTI supplier to reject the call.
3. Once the CTI supplier notifies the partner application that the call is rejected, the partner application can fire the closeCommEvent action with the reason as REJECT.
4. Once the Fusion application identifies this action, the call dialog box will be discarded from the UI.

   The following steps show you how to implement this in your toolbar application:

1. Add an event handler for the disconnect button click event

Add the Reject button clicked event handler in call-panel component as in the following example of the index.html file:

<oj-bind-if test="[[callContext().state === 'RINGING' || callContext().state === 'ACCEPTED']]">
    <call-panel call-context="[[callContext]]"
                on-accept-button-clicked="[[ callAcceptedEventHandler ]]"
                on-disconnect-button-clicked="[[ callDisconnectedEventHandler ]]"></call-panel>
</oj-bind-if>

2. Define callDisconnectedEventHandler function

Define the callDisconnectedEventHandler function in the appController.ts file as shown in the following example. The callDisconnectedEventHandler function internally calls two other functions,disconnectCall, which is defined in integrationActionHandler, andupdateCallPanelState, which is defined in appController.ts itself.

//.....
//.....
import "oj-c/button";
// ....
  
class RootViewModel {
    // ....
  
    constructor() {
        // ....
    };
 
    public callDisconnectedEventHandler: (event: any) => void = (event:  any): void => {
        if (event.detail.disconnectionState === 'WRAPUP') {
            this.integrationActionHandler.disconnectCall(this.callContext().eventId, event.detail.disconnectionState).then(() => {
                this.updateCallPanelState('DISCONNECTED');
            }).catch(() => {
                console.log("Error: Unable to accept the call.")
            });
        } else if (event.detail.disconnectionState === 'REJECT') {
            this.integrationActionHandler.rejectCall(this.callContext().eventId, event.detail.disconnectionState).then(() => {
                this.updateCallPanelState('DISCONNECTED');
            }).catch(() => {
                console.log("Error: Unable to accept the call.")
            });
        }
  }
 
    public updateCallPanelState = (state: string) => {
        this.callContext({...this.callContext(), state: state});
    }
 
    //...
  }
     
}

3. Define the functions disconnectCall and rejectCall in integrationActionHandler.ts file

The disconnectCall function contains the logic to notify your CTI supplier to hang up or reject the call and also it contains the logic to notify the Fusion application that the call is disconnected by firing the closeCommEvent action.

import { IntegrationEventsHandler } from "./integrationEventsHandler";
import { ICtiVendorHandler } from "./vendor/ICtiVendorHandler";
import { VendorHandler } from "./vendor/vendorHandler";
import { FusionHandler } from "./fusion/fusionHandler";
  
export class IntegrationActionHandler {
    private vendor: ICtiVendorHandler;
    private integrationEventsHandler: IntegrationEventsHandler;
  
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.vendor = new VendorHandler();
        this.integrationEventsHandler = integrationEventsHandler;
    }
  
    // .....
 
    public async disconnectCall(eventId: string, disconnectionState: string): Promise<void> {
        await this.vendor.rejectCall();
        await FusionHandler.notifyCallDisconnectedToFusion(eventId, disconnectionState);
    }
 
    public async rejectCall(eventId: string, disconnectionState: string): Promise<void> {
        await this.vendor.rejectCall();
        await FusionHandler.notifyCallDisconnectedToFusion(eventId, disconnectionState);
    }
 
}

4. Implement rejectCall() and hangupCall() functions in vendorHandler.ts file based on your CTI provider's SDK

See your CTI supplier's documentation to identify how an incoming call is notified to the CTI application using their API.The incomingCallNotificationHandler function must be called from there. You can add the logic in vendorHandler.ts file:

import { ICtiVendorHandler } from './ICtiVendorHandler';
   
export class VendorHandler implements ICtiVendorHandler {
    // ....
    public async rejectCall() {
        // TODO: call the vendor specific api to reject a call
    }
    public async hangupCall() {
        // TODO: call the vendor specific api to hangup a call
    }
    // ....
}

5. Define function notifyCallDisconnectedToFusion function in fusionHandler.ts file

From the fusionHandler.ts, you notify the Fusion application that the call is rejected by firing the closeCommEvent action.

export class FusionHandler {
    // ...
 
    public static async notifyCallDisconnectedToFusion(eventId: string, disconnectionState: string): Promise<void> {
        let request: IMcaCloseCommEventActionRequest = FusionHandler.frameworkProvider.requestHelper.createPublishRequest('closeCommEvent') as IMcaCloseCommEventActionRequest;
        request.setReason(disconnectionState);
        const newCommResponse: any = FusionHandler.callToNewCommResponseMap.get(eventId);
        if (newCommResponse) {
            for (const property in newCommResponse) {
                request.getInData().setInDataValueByAttribute(property, newCommResponse[property]);
            }
        }
        //TODO pass unique identifier from your CTI data
        request.setEventId(eventId);
        request.setAppClassification(FusionHandler.appClassification);
        const operationResponse: IMcaCloseComActionResponse = await FusionHandler.phoneContext.publish(request) as IMcaCloseComActionResponse;
    }
     
    // ...
}

Part 2: Rejecting or disconnecting incoming calls from the Fusion application

Now, when an agent clicks on Decline button from the Fusion call notification, it notifies your media toolbar application and your CTI supplier that the call is disconnected by the agent. The following diagram shows the sequence of actions to be performed when an agent rejects the call from the Fusion application:

1. When the agent clicks on the Decline button in the Fusion application, the onToolbarInteractionCommand event is fired with the command as reject.
2. The partner application receives this event and if the event is to reject a call, the partner application notifies the CTI supplier to reject the call.
3. Once the CTI supplier notifies the partner application that the call is rejected, the partner application can fire the closeCommEvent action with the reason as REJECT.
4. Once the Fusion application identifies this action, the call dialog box will be discarded from the UI.

The following diagram shows the sequence of actions performed when the agent disconnects an ongoing call from the Fusion application:

1. When the agent clicks on the End Call button in the Fusion application, the onToolbarInteractionCommand event is fired with the command as disconnect.
2. The partner application receives this event and if the event is to disconnect a call, the partner application notifies the CTI supplier to disconnect the call.
3. Once the CTI supplier notifies the partner application that the call has been disconnected, the partner application can fire the closeCommEvent action.
4. Once the Fusion application identifies this action, it displays the wrap-up window in the UI.

1: Add cases for reject and disconnect in listenToToolbarInteractionCommandsFromFusion in integrationEventsHandler.ts

export class IntegrationEventsHandler {
    // ....
    public listenToToolbarInteractionCommandsFromFusion(command: string): void {
        switch (command) {
            case "accept":
                this.ctiAppViewModel.callAcceptedEventHandler(null);
                break;
            case "disconnect":
                this.ctiAppViewModel.callDisconnectedEventHandler({detail: {disconnectionState: "WRAPUP"}});
                break;
            case "reject":
                this.ctiAppViewModel.callDisconnectedEventHandler({detail: {disconnectionState: "REJECT"}});
                break;
        }
    }
    // ....
  
}

Verify your progress

Once you complete the above steps, use ojet serve to start your application and sign in to your Fusion application. Open the media toolbar and make your agent available for calls by clicking on the agent availability button. Now, start a call to your customer care number. You'll receive the incoming call notification in your media toolbar application and your Fusion window. You can accept the call from your media toolbar application or your Fusion application. Once you accept the call, your media toolbar state will be changed to ACCEPTED state and the engagement will get opened in your Fusion application. You can disconnect the call from your media toolbar application or your Fusion application. Once you disconnect the call, your media toolbar state will change to DISCONNECTED state.