From 9250c60e81857a1254985cca710fdc66e5d3fdc8 Mon Sep 17 00:00:00 2001
From: Bram Pauwelyn <brampauwelyn@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:58:20 +0200
Subject: [PATCH] III-5817 - Use Yup validation instead of custom validation

---
 src/i18n/de.json                        |  4 ++--
 src/i18n/fr.json                        |  4 ++--
 src/i18n/nl.json                        |  4 ++--
 src/pages/steps/AgeRangeStep.tsx        | 12 +-----------
 src/pages/steps/NameAndAgeRangeStep.tsx |  4 +++-
 5 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/i18n/de.json b/src/i18n/de.json
index 065b72339..a1ab877ec 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -246,7 +246,8 @@
           "required": "Name ist erforderlich."
         },
         "age_range": {
-          "required": "Altersklasse erforderlich."
+          "required": "Altersklasse erforderlich.",
+          "matches": "Das angegebene Alter ist ungültig"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "Von",
         "till": "Bis",
         "age": "Jahre",
-        "error_not_valid": "Das angegebene Alter ist ungültig",
         "error_max_lower_than_min": "Das Höchstalter kann nicht unter dem Mindestalter liegen.",
         "error_no_min_age": "Bitte geben Sie ein Mindestalter ein"
       }
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 7d0a2be6c..ab22c3830 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -246,7 +246,8 @@
           "required": "Nom est requis."
         },
         "age_range": {
-          "required": "Group d'âge est requis"
+          "required": "Group d'âge est requis",
+          "matches": "L'âge spécifié n'est pas valide"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "De",
         "till": "à",
         "age": "ans",
-        "error_not_valid": "L'âge spécifié n'est pas valide",
         "error_max_lower_than_min": "L'âge maximum ne peut être inférieur à l'âge minimum.",
         "error_no_min_age": "Veuillez entrer un âge minimum"
       }
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
index 4b896e2f2..e7c13e5df 100644
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@@ -246,7 +246,8 @@
           "required": "Naam is verplicht."
         },
         "age_range": {
-          "required": "Leeftijdsgroep is verplicht."
+          "required": "Leeftijdsgroep is verplicht.",
+          "matches": "De opgegeven leeftijd is niet geldig"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "Van",
         "till": "Tot",
         "age": "jaar",
-        "error_not_valid": "De opgegeven leeftijd is niet geldig",
         "error_max_lower_than_min": "De maximumleeftijd kan niet lager zijn dan de minimumleeftijd.",
         "error_no_min_age": "Gelieve een minimum leeftijd in te vullen"
       }
diff --git a/src/pages/steps/AgeRangeStep.tsx b/src/pages/steps/AgeRangeStep.tsx
index 2be5d52f6..9cf8081e3 100644
--- a/src/pages/steps/AgeRangeStep.tsx
+++ b/src/pages/steps/AgeRangeStep.tsx
@@ -96,16 +96,6 @@ const AgeRangeStep = ({
   };
 
   const handleSubmitCustomAgeRange = (field: Field) => {
-    const numberRegex = new RegExp(/^\d+$/);
-
-    if (
-      !numberRegex.test(customMinAgeRange) ||
-      !numberRegex.test(customMaxAgeRange)
-    ) {
-      setCustomAgeRangeError(t('create.name_and_age.age.error_not_valid'));
-      return;
-    }
-
     if (parseInt(customMinAgeRange) > parseInt(customMaxAgeRange)) {
       setCustomAgeRangeError(
         t('create.name_and_age.age.error_max_lower_than_min'),
@@ -274,7 +264,7 @@ const AgeRangeStep = ({
               {errors.nameAndAgeRange?.typicalAgeRange && (
                 <Text color="red">
                   {t(
-                    'create.name_and_age.validation_messages.age_range.required',
+                    `create.name_and_age.validation_messages.age_range.${errors.nameAndAgeRange?.typicalAgeRange.type}`,
                   )}
                 </Text>
               )}
diff --git a/src/pages/steps/NameAndAgeRangeStep.tsx b/src/pages/steps/NameAndAgeRangeStep.tsx
index d82c6c31b..2c45fb609 100644
--- a/src/pages/steps/NameAndAgeRangeStep.tsx
+++ b/src/pages/steps/NameAndAgeRangeStep.tsx
@@ -19,6 +19,8 @@ import {
   StepsConfiguration,
 } from './Steps';
 
+const numberHyphenNumberRegex = /^\d+-\d+$/;
+
 const useEditNameAndAgeRange = ({
   scope,
   onSuccess,
@@ -81,7 +83,7 @@ const nameAndAgeRangeStepConfiguration: StepsConfiguration<'nameAndAgeRange'> =
     title: ({ t }) => t('create.name_and_age.title'),
     validation: yup.object().shape({
       name: yup.object().shape({}).required(),
-      typicalAgeRange: yup.string().required(),
+      typicalAgeRange: yup.string().matches(numberHyphenNumberRegex).required(),
     }),
     shouldShowStep: ({ watch, formState }) => {
       const location = watch('location');