Twilio Flex UI 2.0 Migration

To get address id (start with IG):

curl -X GET "https://conversations.twilio.com/v1/Configuration/Addresses?PageSize=20" -u account sid:token

 

Migration guide

2.0 enhancements

Business high lights on why Flex 2.0

  • AI
  • Flex Unify
  • Twilio Flex 2.x.x also empowers businesses to interact with customers using both inbound and outbound digital messaging, support building accessible plugins and experiences for disabled users using Twilio Paste, and updated versions of React, Material, Redux and Emotion.

Twilio Paste:

Upgrade dependencies:

  • Minimum node 14
  • React & ReactDOM are now peer dependencies
  • Requires React 17, React-dom 17 (16 does not work)

Webchat React App

Migrating from Material UI to Twilio Paste Gradually

Flex UI 2.0 Enhancements Overview

Root Issues to address:

materialUI – Twilio Paste https://paste.twilio.design/
Redux – Redux Toolkit https://redux-toolkit.js.org/

config.theme

Example Flex UI 2.x package.json
– https://www.twilio.com/docs/flex/developer/ui/migration-guide
– https://www.twilio.com/docs/flex/developer/ui/migration-guide

Messaging Channels
https://www.twilio.com/docs/flex/developer/ui/migration-guide
https://www.twilio.com/docs/flex/developer/conversations/interactions-api
https://www.twilio.com/docs/flex/conversations

web accessibility – probably doesn’t concern us

Degraded mode – already supported

user and activity controls – probably doesn’t concern us

Message UI
– https://assets.flex.twilio.com/docs/releases/flex-ui/latest/programmable-components/components/MessageInputV2?_ga=2.264947343.1427647138.1703602579-889030134.1690389851&_gl=1*1t68hm0*_ga*ODg5MDMwMTM0LjE2OTAzODk4NTE.*_ga_RRP8K4M4F3*MTcwMzYwODMzMS42OS4xLjE3MDM2MTA5ODUuMC4wLjA.
– https://www.twilio.com/docs/flex/developer/ui/migration-guide

TaskRouter SDK
– SDK upgraded to ^0.5.9 (check package.json)
new events – https://assets.flex.twilio.com/docs/releases/flex-ui/2.3.3/ui-actions/ActionsManager/?_ga=2.228108957.1427647138.1703602579-889030134.1690389851&_gl=1*13mv9iq*_ga*ODg5MDMwMTM0LjE2OTAzODk4NTE.*_ga_RRP8K4M4F3*MTcwMzYwODMzMS42OS4xLjE3MDM2MTA5ODUuMC4wLjA.
– https://www.twilio.com/docs/flex/developer/ui/migration-guide

AppConfig
– notifications.browser/enabled
– warmtransfer is removed
– theme

Download media action ???

SendMediaMessage deprecated, being called in
twilio\plugin-nm-master\src\components\ChatInput\index.jsx

voice sdk twilio-client to twilio-voice

Build bundle too large:

webpack-bundle-analyzer

Outbound Dialpad migration