Validation errors for Pre-Chat Form field `phoneNumber` are not being displayed when optional

[lwagner-getmomo]

Describe the bug

When adding an optional phone number to the pre chat form, validation errors are not shown upon entering an invalid phone number, but the user will still be prevented from going forward. Clearing the field allows the user to go forward.

To Reproduce

Steps to reproduce the behavior:

1. Set up a live chat as described in https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup/.
2. Chatwoot Backend: In the settings of the associated inbox go to the tab "Pre Chat Form"
3. Chatwoot Backend: Enable the feature by selecting Yes from the "Enable pre chat form" dropdown.
4. Chatwoot Backend: Enable the phoneNumber form field, make it optional
5. On the Website: Start a chat. The pre chat form comes up.
6. On the Website: Put in a gibberish phone number like 123456. Enter some message.
7. On the Website: Click "Start conversation". Observe the bug.

Expected behavior

Either of the following:

1. The user will get a feedback about the validation error
2. The backend will just not save the phone number and proceeds without one, as the field is not mandatory

Screenshots

Screeshot of field settings in mailbox settings:

Browser logs

[Error] Failed to load resource: the server responded with a status of 422 () (conversations, line 0)

Server logs

Sep 20 04:48:18 PM  I, [2022-09-20T14:48:18.141467 #1]  INFO -- : [88a87282-ac88-4718-b4e1-bea5d51cda96] Started POST "/api/v1/widget/conversations?website_token=[FILTERED]&locale=de" for 172.70.251.128 at 2022-09-20 14:48:18 +0000
Sep 20 04:48:18 PM  I, [2022-09-20T14:48:18.145560 #1]  INFO -- : [88a87282-ac88-4718-b4e1-bea5d51cda96] Processing by Api::V1::Widget::ConversationsController#create as JSON
Sep 20 04:48:18 PM  I, [2022-09-20T14:48:18.145709 #1]  INFO -- : [88a87282-ac88-4718-b4e1-bea5d51cda96]   Parameters: {"contact"=>{"name"=>"Some Dude", "email"=>"[email protected]", "phone_number"=>"2324521"}, "message"=>{"content"=>"A message", "timestamp"=>"Tue Sep 20 2022 16:48:17 GMT+0200 (CEST)", "referer_url"=>""}, "custom_attributes"=>{}, "website_token"=>"[FILTERED]", "locale"=>"de", "conversation"=>{"custom_attributes"=>{}}}
Sep 20 04:48:18 PM  I, [2022-09-20T14:48:18.214983 #1]  INFO -- : [88a87282-ac88-4718-b4e1-bea5d51cda96] Completed 422 Unprocessable Entity in 69ms (Views: 6.5ms | ActiveRecord: 35.8ms | Allocations: 5181)
Sep 20 04:48:18 PM  I, [2022-09-20T14:48:18.215375 #1]  INFO -- : source=rack-timeout id=88a87282-ac88-4718-b4e1-bea5d51cda96 wait=0ms timeout=15000ms service=85ms state=completed

Environment

We're using a chatwoot docker container (chatwoot/chatwoot:latest). It's being updated automatically whenever there is a new image available.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Safari Version 15.6.1 (17613.3.9.1.16); Firefox Version 104.0.2 (64-bit)

Additional context

None that we're aware, but we're happy to answer any questions, should they arise.