Show errors when SMS can't be sent

[Swimburger]

I'm testing the Dev Phone from a trial account. Do to trial account restrictions, the Dev Phone can't send SMS to phone numbers that aren't in the Verified Caller ID list. That's how it should be, but the Dev Phone shows the SMS as sent in the UI while logging an error in the console.

Console output:

SMS API threw an error TwilioCliError: Error code 21608 from Twilio: The number  is unverified. Trial accounts cannot send messages to unverified numbers; verify  at twilio.com/user/account/phone-numbers/verified, or purchase a Twilio number to send messages to unverified numbers.. See https://www.twilio.com/docs/errors/21608 for more info.
    at CliRequestClient.request (/Users/nswimberghe/.twilio-cli/node_modules/@twilio/cli-core/src/services/cli-http-client.js:113:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  exitCode: 21608,
  data: {
    code: 21608,
    message: 'The number  is unverified. Trial accounts cannot send messages to unverified numbers; verify  at twilio.com/user/account/phone-numbers/verified, or purchase a Twilio number to send messages to unverified numbers.',
    more_info: 'https://www.twilio.com/docs/errors/21608',
    status: 400
  }
}

UI screenshot:

I suggest we should show the SMS as failed to send in the UI and if possible, show reason why, or refer to the console output.

[ayyrickay]

Good call. This was very optimistic design, and it needs to handle the error cases better.

Some things that need to happen:

1. Backend function to send SMS needs to send the relevant response details to the front end.
2. Frontend needs to update the message based on this response - we should update the Redux store with the correct error state on the correct message
3. Frontend needs design for an error state that handles this appropriately
4. This may not be totally true, but I think the best place for detailed output will be in the CLI logs. This gets complicated if we do things like #143 or threaded messages