Twilio Flex Plugin for Verify

Setup

Install Node.js and npm.

Then install the dependencies by running npm install:

npm install

REACT_APP_SERVICE_BASE_URL: your Twilio Functions base url (this will be available after you deploy your functions). In local development environment, it could be your localhost base url.

Development

Start the server by running:

npm start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:3000. If you want to change that you can do this by setting the PORT environment variable:

PORT=3001 npm start

Deploy

When you are ready to deploy your plugin, in your terminal run:

npm run deploy

This will publish your plugin as a Private Asset that is accessible by the Functions & Assets API. If you want to deploy your plugin as a Public Asset, you may pass --public to your deploy command:

npm run deploy --public

For more details on deploying your plugin, refer to the deploying your plugin guide.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex to provide them globally.

TODO

• don't show "INFO" tab marker (even tho it's empty) until it's verified
• add verify service as part of the plugin installation/setup instructions
• partner promotion content - talk to justin pirie
• improve README / write blog post
• reference deployed functions in VerifyState instead
• make verified and tokenSent task specific (task.sid)
• remove task info panel tab until it needs to show up
• condense 'withTaskContext's
• don't hardcode function URLs
• persist verification state on refresh / for duration of the task (localStorage) ?
• add functions as part of the plugin. see: https://www.twilio.com/blog/flex-plugins-vs-code-functions-cli
• show TaskInfoPanel only if user IS verified
• fix formatting of input token box
• get async functions on send working
• add error display when there's an issue sending the token
• add error display when the code is incorrect
• hide TaskInfoPanel if user is NOT verified
• move verification banner so it's task/user specific101618
• fix promise handling - actually have a pending/fulfilled state
• hide verification banner when the task concludes
• hide verification button if call has ended (in the "post call state")

Questions for code reviewers

1. I'm not an experienced React or Flex developer, open to any feedback on the general structure/layout!
2. How do I persist state for the duration of a task? Currently the state resets on refresh.
3. This flow requires the agent to type in the code. Is this use case valuable or should I focus on a pre-call automatic authentication (using DTMF input)
4. How would you toggle content viewability based on plugin state? See this example for what I'm trying to do
5. Is it possible to extend flex-ui form styling? Or should I just be using Material UI? See this Slack post
6. Any other suggestions or ideas?

Later features

• automatic authentication before the call is accepted - use dtmf to input code (different plugin?)
• add resend button
• add tests
• use material-ui?
• add authentication to Twilio functions (https://www.npmjs.com/package/twilio-flex-token-validator)
• figure out how to deploy functions seamlessly
• rearchitect with custom actions? https://github.com/twilio-professional-services/flex-dialpad-addon-plugin/blob/c6726b5086162c247d75adcb0851b36845114b51/src/customActions/internalCall/index.js