CODEWITHSUNDEEP
typescripttwiliotwilio-flex
Ben Osborne
Ben Osborne

Reputation: 1542

Twilio Flex Plugin - Invoke Action On Click

In a Twilio Flex plugin, I want to have a button next to Reject that sends the call back to the IVR flow (where they'll be prompted to leave a voicemail).

enter image description here

I can get this to work via the Reject button if I replace the RejectTask action:

flex.Actions.replaceAction('RejectTask', async (payload, original) => {

    const url: string = payload.task.attributes.transferToIvrUrl;
    const CallSid: string = payload.task.attributes.call_sid;
    const reservationSid = payload.sid;
    const transferToIVRMenu = 'vm';

    if (!url || !CallSid) {
        await original(payload);
        return;
    }

    await manager.workerClient.reservations.get(reservationSid)?.accept();
    await manager.workerClient.reservations.get(reservationSid)?.wrap();
    await manager.workerClient.reservations.get(reservationSid)?.complete();
    await request(url, { CallSid, transferToIVRMenu });
});

However, I don't want to replace the RejectTask action. I would like to invoke the body of the function above when the SendToVm button is clicked, whether that's by invoking an action or some other means.

Here's my current attempt.

The button:

flex.DefaultTaskChannels.Call.addedComponents = [{
    target: "TaskListButtons",
    component: <Flex.IconButton onClick={sendToVmButtonClick()} key="vm-button" icon="Voice" />
}];

Button click method:

const sendToVmButtonClick = () => async () => {
    await flex.Actions.invokeAction("SendToVmTask");
};

The action:

flex.Actions.registerAction('SendToVmTask', async (payload) => {

    const url: string = payload.task.attributes.transferToIvrUrl;
    const CallSid: string = payload.task.attributes.call_sid;
    const reservationSid = payload.sid;
    const transferToIVRMenu = 'vm';

    await manager.workerClient.reservations.get(reservationSid)?.accept();
    await manager.workerClient.reservations.get(reservationSid)?.wrap();
    await manager.workerClient.reservations.get(reservationSid)?.complete();
    await request(url, { CallSid, transferToIVRMenu });
});

The problem is, the way I'm calling that action now, payload is undefined, so the function doesn't have access to any of those values that it needs. I'm not sure how to provide the task to the function when it's invoked.

Any help would be appreciated. I apologize for my ignorance. I haven't worked much with React or Twilio plugin development.

Upvotes: 0

Views: 616

Answers (1)

philnash
philnash

Reputation: 73057

What you want to do is include the task context in the component that you are adding to the page, so that you can send it as the payload to the action. I think you will need to wrap the <Flex.IconButton> in your own component in order to do this.

Using the withTaskContext function to wrap the component will mean that the component is created with a task property. You can then use that in the payload you send when you invoke the Action.

Something like this should work:

import React, { Component } from "react";
import { withTaskContext } from "@twilio/flex-ui";

class SendToVMButton extends Component {
  const sendToVmButtonClick = async () => {
    await flex.Actions.invokeAction("SendToVmTask", { task: props.task }); 
  };

  render() {
    return <Flex.IconButton onClick={sendToVmButtonClick} key="vm-button" icon="Voice" />
  }
}

export default withTaskContext(SendToVMButton);

Upvotes: 2

Related Questions