Create a generic and simpler approach to errors

[NathanVss]

Feature Request

Validation translations

Currently, to define errors for a form we need to register locally Yup.setLocale translations like in the file frontend/js/components/AddressesManagement/validationSchema.ts, although exporting the specific-form Yup schema here is a good idea, I think that defining error messages and Yup.setLocale only here will be problematic in the future where we will need several forms sharing the same translations for requirement, string_max errors for instance, these forms would need to import every local validationSchema to benefit from the translations. Indeed the error translations defined in the mentionned file are generic to all potential forms.

Another use that could be generic is the call getLocalizedErrorMessage on each input like this:

<TextField
        ...
        error={!!formState.errors.title}
        message={getLocalizedErrorMessage(formState.errors.title?.message)}
        {...register('title')}
      />

What I propose is to define on the app level the form error translations ( the invocation of Yup.setLocale ) and also finding a way to avoid having to call getLocalizedErrorMessage on each input, to just have to use the ?.message that would already be translated.

<TextField
        ...
        error={!!formState.errors.title}
        message={formState.errors.title?.message}
        {...register('title')}
      />

APIs error details

Currently, if the API emits an error, the frontend only shows such an error: An error occurred while address {action}. Please retry later. which is really blurry and may be frustrating to some users to not have more informations, why not include the API error message to provide more details ?

Displaying errors

Currently, components prone to displaying errors do it like this:

{error && (
  <Banner
    message={intl.formatMessage(messages.error, { action: error })}
    type={BannerType.ERROR}
    rounded
  />
)}

Which implies that each component needs to define where to display its errors ( I'm not talking about form validation errors which are shown below inputs and that's nice, but more about API errors, unexpected ones etc ), so its 1/ quite repetitive 2/ not centralized.

What I propose is to display those errors in a toast component which pops on the top of the screen ( or bottom, whatever ), I already used this library in another project https://github.com/iamhosseindhv/notistack which does the job really well. We would be able to trigger error displays with just enqueueSnackbar('API Error'); without having to define a local error banner each time.

What do you think about that ? 🙏