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

Tasks

Beta Give feedback

1. Consider different way to handle errors for upsert & delete shipping rates/times #489
   category: refactor type: technical debt +2
   
2. Edit Free Listings: Success notification is shown when there is an API error and saving is not successful #1331
   priority: high type: bug +2
   
3. Improve error handling when operating ads campaigns #1246
   category: i18n google ads impact: high type: enhancement +4
   

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

📌 Display form validation errors

Tasks

Beta Give feedback

1. Expose errors to allow setup to complete #634
   impact: high type: enhancement +2
   

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

Tasks

Beta Give feedback

1. Detailed error when unable to complete site verification #1725
   priority: high site verfication & claim type: enhancement +3
   
2. Audience Auto-save shows error when selector is empty. #1855
   type: bug +1
   
3. No message on invalid phone number #1101
   priority: low type: bug +2
   

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

[eason9487]

Close this issue: All listed tasks have been completed.