Improve the error handling and prompts in the onboarding

[eason9487]

Goals

During the onboarding

• Prompts for explicit errors such as incorrect input formatting or missing required fields to reduce confusion for users
• Make error messages more specific as to which part of the error occurred

The main scope is the Onboarding flow and the Edit Free Listings page. (The editing page basically reuses most of the code)

Related tasks

📌 Deal with technical error handling

- [x] https://github.com/woocommerce/google-listings-and-ads/issues/489
- [x] https://github.com/woocommerce/google-listings-and-ads/issues/1331
- [x] https://github.com/woocommerce/google-listings-and-ads/issues/1246

These tasks are more about technical adjustments. It expects to use the current UI and will not change significantly.

📌 Display form validation errors

- [x] https://github.com/woocommerce/google-listings-and-ads/issues/634

This is the top priority in this project as there were a lot of user reports related to it.

To display the form/data validation errors, the main points of the change are:

1. Change the timing of triggering form validation and showing errors.
   • Don't disable the "Continue" or "Compete" buttons even if the form validation doesn't pass.
   • The form validation errors are not displayed until the user clicks the above button.
   • After displaying the validation errors, the errors will continue to be updated with user input.
2. Similar to the Asset Group management page. The error messages are grouped by Card UI and are displayed below the UI layout they belong to.
   • For example:
     
3. The # issues pill UI won't be added because the forms other than Asset Group don't have the collapse and expanding interaction.
4. These changes won't be applied to the modals of shipping setup as the modal should be clear enough and no user seems to have reported a problem with this.
   • Shipping modal:
     
5. To be consistent, the event tracking of the above buttons will still be triggered only when the step can be proceeded to the next one or be completed.

📌 Clarify API error messages

- [x] https://github.com/woocommerce/google-listings-and-ads/issues/1725
- [x] https://github.com/woocommerce/google-listings-and-ads/issues/1855
- [x] https://github.com/woocommerce/google-listings-and-ads/issues/1101

The error messages in these tasks were already handled or shown but may confuse users. It expects to use the current UI or remove the unnecessary error message.

📌 Add tests

• Add tests for the VerifyPhoneNumberContent component (#2027, #2031)

Links

Project:

• Project thread: pcTzPl-1yj-p2