feat: show better error message for failing validations

projectcaluma · Dec 6, 2023 · ce00677 · ce00677
1 parent 01c832a
commit ce00677
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/packages/form/addon/components/cf-field.hbs b/packages/form/addon/components/cf-field.hbs
@@ -49,7 +49,7 @@
               {{#if this.save.last.error}}
                 <div uk-dropdown="pos: bottom-left" class="uk-padding-small">
                   <div class="uk-alert uk-alert-danger uk-margin-small">
-                    {{t "caluma.form.error.intro"}}
+                    {{this.errorIntroText}}
                   </div>
                   <p class="uk-text-meta uk-margin-small">
                     {{t "caluma.form.error.details"}}

diff --git a/packages/form/addon/components/cf-field.js b/packages/form/addon/components/cf-field.js
@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { timeout, restartableTask } from "ember-concurrency";
@@ -18,6 +19,8 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * @argument {Field} field The field data model to render
  */
 export default class CfFieldComponent extends Component {
+  @service intl;
+
   @action
   registerComponent() {
     this.args.field._components.add(this);
@@ -55,6 +58,17 @@ export default class CfFieldComponent extends Component {
     );
   }
 
+  get errorIntroText() {
+    const _errors = this.save.last.error.errors ?? [];
+    if (_errors.some((e) => e?.code === "network_error")) {
+      return this.intl.t("caluma.form.error.offline");
+    }
+    if (_errors.some((e) => e?.message.includes("code='invalid'"))) {
+      return this.intl.t("caluma.form.error.invalid");
+    }
+    return this.intl.t("caluma.form.error.technical-error");
+  }
+
   get saveIndicatorVisible() {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }

diff --git a/packages/form/translations/de.yaml b/packages/form/translations/de.yaml
@@ -13,8 +13,10 @@ caluma:
     info: "Mehr Informationen"
 
     error:
-      intro: "Oh nein, auf unserer Seite ist etwas schief gelaufen. Ihre Antwort konnte nicht gespeichert werden."
       details: "Technische Details:"
+      technical-error: "Oh nein, auf unserer Seite ist etwas schief gelaufen. Ihre Antwort konnte nicht gespeichert werden."
+      offline: "Ihre Antwort konnte nicht gespeichert werden, da Sie offline sind. Bitte überprüfen Sie Ihre Internetverbindung und versuchen Sie es erneut."
+      invalid: "Ihre Antwort konnte nicht gespeichert werden, weil die Validierung fehlgeschlagen ist. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut."
 
     navigation:
       next: "Weiter"

diff --git a/packages/form/translations/en.yaml b/packages/form/translations/en.yaml
@@ -13,8 +13,10 @@ caluma:
     info: "More information"
 
     error:
-      intro: "Oh no, something went wrong on our side. Your answer could not be saved."
       details: "Technical details:"
+      technical-error: "Oh no, something went wrong on our side. Your answer could not be saved."
+      offline: "Your answer could not be saved because you are offline. Please check your internet connection and try again."
+      invalid: "Your answer could not be saved because the validation failed. Please check your entries and try again."
 
     navigation:
       next: "Next"

diff --git a/packages/form/translations/fr.yaml b/packages/form/translations/fr.yaml
@@ -13,8 +13,10 @@ caluma:
     info: "Plus d'informations"
 
     error:
-      intro: "Oh non, quelque chose a mal tourné de notre côté. Votre réponse n'a pas pu être sauvegardée."
       details: "Détails techniques :"
+      technical-error: "Oh non, quelque chose a mal tourné de notre côté. Votre réponse n'a pas pu être sauvegardée."
+      offline: "Votre réponse n'a pas pu être enregistrée car vous êtes hors ligne. Veuillez vérifier votre connexion Internet et réessayer."
+      invalid: "Votre réponse n'a pas pu être enregistrée car la validation a échoué. Veuillez vérifier vos saisies et réessayer."
 
     navigation:
       next: "suivante"