Redirect Call to Automated Voicemail Message

plugin.js

import RedirectCall from './RedirectCall';

...

init(flex, manager) {
  flex.CallCanvasActions.Content.add(
    <RedirectCall key="redirect-call-button" />
  );
}

RedirectCall.js

import React from 'react';
import { IconButton, withTheme } from '@twilio/flex-ui';

const containerStyles = {
    padding: '20px'
}

const paragraphStyles = {
    marginBottom: '20px'
}

class RedirectButton extends React.Component {
  onClick() {
    const customerCallSid = this.props.task.attributes.conference.participants.customer;

    // invoke a Twilio Function with the customerCallSid
    // the twilio function will use the REST API to update the call and redirect it to some twiml that play the message
  }

  render() {
    return (
        <div style={containerStyles}>
            <IconButton icon="VoiceBold" themeOverride={this.props.theme.CallCanvas.Button} onClick={ this.onClick.bind(this) }>Play automated voicemail</IconButton>
        </div>
    )
  }
}

export default withTheme(RedirectButton)

twilio-function.js

exports.handler = function(context, event, callback) {
  
  let client = context.getTwilioClient(),
    twiml = new Twilio.twiml.VoiceResponse(),
    customerCallSid = event.CustomerCallSid || null;

    // Set CORS to allow Flex to make request to a different domain
    const response = new Twilio.Response();
    response.appendHeader("Access-Control-Allow-Origin", "*");
    response.appendHeader("Access-Control-Allow-Methods", "OPTIONS POST");
    response.appendHeader("Content-Type", "application/json");
    response.appendHeader("Access-Control-Allow-Headers", "Content-Type");

    // update the customer's call to point to some TwiML
    client.calls(customerCallSid)
        .update({
          method: "POST",
          url: `SOME_TWIML_URL`
        })
        .then(call => {
          response.setBody("complete");
          callback(null, response);
        });
};