LF-4410: No reset on limit, show error

LiteFarmOrg · Dec 4, 2024 · 83d148a · 83d148a
1 parent d4d8765
commit 83d148a
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 11 deletions.
diff --git a/packages/webapp/public/locales/de/animal.json b/packages/webapp/public/locales/de/animal.json
@@ -55,5 +55,8 @@
     "MILK": "Milch",
     "OTHER": "Andere",
     "RECREATIONAL_OR_CULTURAL_USE": "Kulturelle oder Freizeitnutzung"
+  },
+  "COUNT": {
+    "MAX": "MISSING"
   }
 }
diff --git a/packages/webapp/public/locales/en/animal.json b/packages/webapp/public/locales/en/animal.json
@@ -49,5 +49,8 @@
     "RECREATIONAL_OR_CULTURAL_USE": "Recreational or Cultural Use",
     "COMPANIONSHIP": "Companionship",
     "OTHER": "Other"
+  },
+  "COUNT": {
+    "MAX": "You can only add up to {{max}} animals at a time"
   }
 }
diff --git a/packages/webapp/public/locales/es/animal.json b/packages/webapp/public/locales/es/animal.json
@@ -49,5 +49,8 @@
     "RECREATIONAL_OR_CULTURAL_USE": "MISSING",
     "COMPANIONSHIP": "MISSING",
     "OTHER": "MISSING"
+  },
+  "COUNT": {
+    "MAX": "MISSING"
   }
 }
diff --git a/packages/webapp/public/locales/fr/animal.json b/packages/webapp/public/locales/fr/animal.json
@@ -49,5 +49,8 @@
     "RECREATIONAL_OR_CULTURAL_USE": "MISSING",
     "COMPANIONSHIP": "MISSING",
     "OTHER": "MISSING"
+  },
+  "COUNT": {
+    "MAX": "MISSING"
   }
 }
diff --git a/packages/webapp/public/locales/pt/animal.json b/packages/webapp/public/locales/pt/animal.json
@@ -49,5 +49,8 @@
     "RECREATIONAL_OR_CULTURAL_USE": "MISSING",
     "COMPANIONSHIP": "MISSING",
     "OTHER": "MISSING"
+  },
+  "COUNT": {
+    "MAX": "MISSING"
   }
 }
diff --git a/packages/webapp/src/components/Animals/AddAnimalsFormCard/AddAnimalsFormCard.tsx b/packages/webapp/src/components/Animals/AddAnimalsFormCard/AddAnimalsFormCard.tsx
@@ -64,6 +64,8 @@ export default function AddAnimalsFormCard({
     getValues,
     setValue,
     resetField,
+    setError,
+    clearErrors,
     formState: { errors },
   } = useFormContext();
 
@@ -84,6 +86,22 @@ export default function AddAnimalsFormCard({
     }
   }, []);
 
+  const countMaxValidation = () => ({
+    value: ANIMAL_COUNT_LIMIT,
+    message: t('animal:COUNT.MAX', { max: ANIMAL_COUNT_LIMIT }),
+  });
+
+  useEffect(() => {
+    if (shouldCreateIndividualProfiles && watchAnimalCount > ANIMAL_COUNT_LIMIT) {
+      setError(`${namePrefix}${BasicsFields.COUNT}`, {
+        type: 'manual',
+        message: t('animal:COUNT.MAX', { max: ANIMAL_COUNT_LIMIT }),
+      });
+    } else {
+      clearErrors(`${namePrefix}${BasicsFields.COUNT}`);
+    }
+  }, [watchAnimalCount, shouldCreateIndividualProfiles, setError, clearErrors]);
+
   const filteredBreeds = breedOptions.filter(({ type }) => type === watchAnimalType?.value);
 
   return (
@@ -114,17 +132,16 @@ export default function AddAnimalsFormCard({
         <NumberInput
           name={`${namePrefix}${BasicsFields.COUNT}`}
           control={control}
-          max={shouldCreateIndividualProfiles ? ANIMAL_COUNT_LIMIT : undefined}
           label={t('common:COUNT')}
           className={styles.countInput}
           allowDecimal={false}
-          value={watchAnimalCount}
           showStepper
           rules={{
             required: {
               value: true,
               message: t('common:REQUIRED'),
             },
+            max: shouldCreateIndividualProfiles ? countMaxValidation() : undefined,
             min: hookFormMinValidation(1),
           }}
           onChange={() => trigger(`${namePrefix}${BasicsFields.COUNT}`)}
@@ -154,11 +171,6 @@ export default function AddAnimalsFormCard({
         hookFormRegister={register(`${namePrefix}${BasicsFields.CREATE_INDIVIDUAL_PROFILES}`)}
         onChange={(e) => {
           onIndividualProfilesCheck?.((e.target as HTMLInputElement).checked);
-          if ((e.target as HTMLInputElement).checked && watchAnimalCount > ANIMAL_COUNT_LIMIT) {
-            setValue(`${namePrefix}${BasicsFields.COUNT}`, ANIMAL_COUNT_LIMIT, {
-              shouldValidate: true,
-            });
-          }
         }}
       />
       {shouldCreateIndividualProfiles ? (

diff --git a/packages/webapp/src/components/Form/NumberInput/index.tsx b/packages/webapp/src/components/Form/NumberInput/index.tsx
@@ -36,8 +36,6 @@ export type NumberInputProps<T extends FieldValues> = UseControllerProps<T> &
     showStepper?: boolean;
 
     className?: string;
-
-    value?: number;
   };
 
 export default function NumberInput<T extends FieldValues>({
@@ -59,7 +57,6 @@ export default function NumberInput<T extends FieldValues>({
   className,
   onChange,
   onBlur,
-  value,
   ...props
 }: NumberInputProps<T>) {
   const { field, fieldState, formState } = useController({ name, control, rules, defaultValue });
@@ -90,7 +87,6 @@ export default function NumberInput<T extends FieldValues>({
       className={className}
       error={fieldState.error?.message}
       onResetIconClick={reset}
-      value={value}
       leftSection={currencySymbol}
       rightSection={
         <>