Lf 4156 create animal batch creation form card

packages/webapp/public/locales/en/common.json

@@ -19,6 +19,7 @@
   "CLOSE": "Close",
   "CONFIRM": "Confirm",
   "CONTINUE": "Continue",
+  "COUNT": "Count",
   "CREATE": "Create",
   "CREATE_A_TASK": "Create a task",
   "DATE": "Date",

packages/webapp/public/locales/en/translation.json

@@ -1,10 +1,20 @@
 {
   "ADD_ANIMAL": {
+    "ADD_TO_INVENTORY": "Add animal to your inventory",
     "ANIMALS_TOTAL_one": "{{count}} animal total",
     "ANIMALS_TOTAL_other": "{{count}} animals total",
     "ANIMALS_UNSPECIFIED_one": "{{count}} unspecified",
     "ANIMALS_UNSPECIFIED_other": "{{count}} unspecified",
+    "BATCH_NAME": "Batch name",
+    "BATCH_NAME_PLACEHOLDER": "Type in batch name",
+    "BREED": "Breed",
+    "BREED_PLACEHOLDER": "Add your animal breed",
+    "BREED_PLACEHOLDER_DISABLED": "Please select a type first",
+    "CREATE_INDIVIDUAL_PROFILES": "Create individual animal profiles",
+    "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "Select this option if you want to track and manage each animal separately. This allows for detailed records and individualised care plans, all animals will be conveniently grouped. If you don't select 'Create Individual Animal Profiles' you'll create an Animal Batch. This is ideal for\u00a0managing animals collectively. In batch mode, individual animal details are not tracked.",
     "GENERAL_DETAILS": "General details",
+    "GROUP_NAME": "Group name",
+    "GROUP_NAME_PLACEHOLDER": "Type in group name",
     "ORIGIN": "Origin",
     "OTHER_DETAILS": "Other details",
     "OUT_OF_COUNT_one": "{{animalNumber}} out of {{count}}",
@@ -43,6 +53,8 @@
       "HERE_IS_SUMMARY": "Here is a summary of your added animals:",
       "MAIN": "You successfully added {{animalCount}} {{and}} {{batchCount}} to your inventory."
     },
+    "TYPE": "Type",
+    "TYPE_PLACEHOLDER": "Select the animal type",
     "UNIQUE_DETAILS": "Unique details",
     "USED_FOR_REPRODUCTION": "Used for reproduction?"
   },

packages/webapp/public/locales/es/common.json

@@ -19,6 +19,7 @@
   "CLOSE": "Cerrar",
   "CONFIRM": "Confirmar",
   "CONTINUE": "Continuar",
+  "COUNT": "MISSING",
   "CREATE": "Agregar",
   "CREATE_A_TASK": "MISSING",
   "DATE": "Fecha",

packages/webapp/public/locales/es/translation.json

@@ -1,12 +1,22 @@
 {
   "ADD_ANIMAL": {
+    "ADD_TO_INVENTORY": "MISSING",
     "ANIMALS_TOTAL_one": "MISSING",
     "ANIMALS_TOTAL_many": "MISSING",
     "ANIMALS_TOTAL_other": "MISSING",
     "ANIMALS_UNSPECIFIED_one": "MISSING",
     "ANIMALS_UNSPECIFIED_many": "MISSING",
     "ANIMALS_UNSPECIFIED_other": "MISSING",
+    "BATCH_NAME": "MISSING",
+    "BATCH_NAME_PLACEHOLDER": "MISSING",
+    "BREED": "MISSING",
+    "BREED_PLACEHOLDER": "MISSING",
+    "BREED_PLACEHOLDER_DISABLED": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GROUP_NAME": "MISSING",
+    "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
     "OTHER_DETAILS": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
@@ -44,6 +54,8 @@
       "HERE_IS_SUMMARY": "MISSING",
       "MAIN": "MISSING"
     },
+    "TYPE": "MISSING",
+    "TYPE_PLACEHOLDER": "MISSING",
     "UNIQUE_DETAILS": "MISSING",
     "USED_FOR_REPRODUCTION": "MISSING"
   },

packages/webapp/public/locales/fr/common.json

@@ -19,6 +19,7 @@
   "CLOSE": "Fermer",
   "CONFIRM": "Valider",
   "CONTINUE": "Continuer",
+  "COUNT": "MISSING",
   "CREATE": "Créer",
   "CREATE_A_TASK": "MISSING",
   "DATE": "Date",

packages/webapp/public/locales/fr/translation.json

@@ -1,12 +1,22 @@
 {
   "ADD_ANIMAL": {
+    "ADD_TO_INVENTORY": "MISSING",
     "ANIMALS_TOTAL_one": "MISSING",
     "ANIMALS_TOTAL_many": "MISSING",
     "ANIMALS_TOTAL_other": "MISSING",
     "ANIMALS_UNSPECIFIED_one": "MISSING",
     "ANIMALS_UNSPECIFIED_many": "MISSING",
     "ANIMALS_UNSPECIFIED_other": "MISSING",
+    "BATCH_NAME": "MISSING",
+    "BATCH_NAME_PLACEHOLDER": "MISSING",
+    "BREED": "MISSING",
+    "BREED_PLACEHOLDER": "MISSING",
+    "BREED_PLACEHOLDER_DISABLED": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GROUP_NAME": "MISSING",
+    "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
     "OTHER_DETAILS": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
@@ -48,6 +58,8 @@
       "HERE_IS_SUMMARY": "MISSING",
       "MAIN": "MISSING"
     },
+    "TYPE": "MISSING",
+    "TYPE_PLACEHOLDER": "MISSING",
     "UNIQUE_DETAILS": "MISSING",
     "USED_FOR_REPRODUCTION": "MISSING"
   },

packages/webapp/public/locales/pt/common.json

@@ -19,6 +19,7 @@
   "CLOSE": "Fechar",
   "CONFIRM": "Confirmar",
   "CONTINUE": "Continuar",
+  "COUNT": "MISSING",
   "CREATE": "Adicionar",
   "CREATE_A_TASK": "MISSING",
   "DATE": "Data",

packages/webapp/public/locales/pt/translation.json

@@ -1,12 +1,22 @@
 {
   "ADD_ANIMAL": {
+    "ADD_TO_INVENTORY": "MISSING",
     "ANIMALS_TOTAL_one": "MISSING",
     "ANIMALS_TOTAL_many": "MISSING",
     "ANIMALS_TOTAL_other": "MISSING",
     "ANIMALS_UNSPECIFIED_one": "MISSING",
     "ANIMALS_UNSPECIFIED_many": "MISSING",
     "ANIMALS_UNSPECIFIED_other": "MISSING",
+    "BATCH_NAME": "MISSING",
+    "BATCH_NAME_PLACEHOLDER": "MISSING",
+    "BREED": "MISSING",
+    "BREED_PLACEHOLDER": "MISSING",
+    "BREED_PLACEHOLDER_DISABLED": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES": "MISSING",
+    "CREATE_INDIVIDUAL_PROFILES_TOOLTIP": "MISSING",
     "GENERAL_DETAILS": "MISSING",
+    "GROUP_NAME": "MISSING",
+    "GROUP_NAME_PLACEHOLDER": "MISSING",
     "ORIGIN": "MISSING",
     "OTHER_DETAILS": "MISSING",
     "OUT_OF_COUNT_one": "MISSING",
@@ -48,6 +58,8 @@
       "HERE_IS_SUMMARY": "MISSING",
       "MAIN": "MISSING"
     },
+    "TYPE": "MISSING",
+    "TYPE_PLACEHOLDER": "MISSING",
     "UNIQUE_DETAILS": "MISSING",
     "USED_FOR_REPRODUCTION": "MISSING"
   },

packages/webapp/src/components/Animals/AddAnimalsFormCard/AddAnimalsFormCard.tsx

@@ -0,0 +1,153 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Controller, useFormContext } from 'react-hook-form';
+
+import NumberInput from '../../Form/NumberInput';
+import Checkbox from '../../Form/Checkbox';
+import SexDetails from '../../Form/SexDetails';
+import styles from './styles.module.scss';
+import Input from '../../Form/Input';
+import Card from '../../CardV2';
+import { Main } from '../../Typography';
+import TextButton from '../../Form/Button/TextButton';
+import { ReactComponent as XIcon } from '../../../assets/images/x-icon.svg';
+import { type Details as SexDetailsType } from '../../Form/SexDetails/SexDetailsPopover';
+import {
+  AnimalBreedSelect,
+  AnimalTypeSelect,
+  type AnimalBreedSelectProps,
+  type AnimalTypeSelectProps,
+  type Option,
+} from './AnimalSelect';
+import { useTranslation } from 'react-i18next';
+
+const FIELD_NAMES = {
+  TYPE: 'type',
+  BREED: 'breed',
+  SEX_DETAILS: 'sexDetails',
+  COUNT: 'count',
+  CREATE_INDIVIDUAL_PROFILES: 'createIndividualProfiles',
+  GROUP: 'group',
+  BATCH: 'batch',
+} as const;
+
+// Should be moved up to parent component that calls useForm
+type FormFields = {
+  [FIELD_NAMES.TYPE]?: Option;
+  [FIELD_NAMES.BREED]?: Option;
+  [FIELD_NAMES.SEX_DETAILS]: SexDetailsType;
+  [FIELD_NAMES.COUNT]?: number;
+  [FIELD_NAMES.CREATE_INDIVIDUAL_PROFILES]?: boolean;
+  [FIELD_NAMES.GROUP]?: string;
+  [FIELD_NAMES.BATCH]?: string;
+};
+
+type AddAnimalsFormCardProps = AnimalTypeSelectProps &
+  AnimalBreedSelectProps & {
+    sexDetailsOptions: SexDetailsType;
+    onIndividualProfilesCheck?: (isChecked: boolean) => void;
+    onRemoveButtonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    showRemoveButton?: boolean;
+    isActive?: boolean;
+  };
+
+export default function AddAnimalsFormCard({
+  typeOptions,
+  breedOptions,
+  sexDetailsOptions,
+  onTypeChange,
+  onIndividualProfilesCheck,
+  showRemoveButton,
+  onRemoveButtonClick,
+  isActive,
+}: AddAnimalsFormCardProps) {
+  const { control, watch, register } = useFormContext<FormFields>();
+  const { t } = useTranslation();
+  const watchAnimalCount = watch(FIELD_NAMES.COUNT) || 0;
+  const watchAnimalType = watch(FIELD_NAMES.TYPE);
+  const shouldCreateIndividualProfiles = watch(FIELD_NAMES.CREATE_INDIVIDUAL_PROFILES);
+
+  return (
+    <Card className={styles.form} isActive={isActive}>
+      <div className={styles.formHeader}>
+        <Main>{t('ADD_ANIMAL.ADD_TO_INVENTORY')}</Main>
+        {showRemoveButton && (
+          <TextButton className={styles.removeBtn} onClick={onRemoveButtonClick}>
+            <XIcon /> {t('common:REMOVE')}
+          </TextButton>
+        )}
+      </div>
+      <AnimalTypeSelect
+        name={FIELD_NAMES.TYPE}
+        control={control}
+        typeOptions={typeOptions}
+        onTypeChange={onTypeChange}
+      />
+      <AnimalBreedSelect
+        name={FIELD_NAMES.BREED}
+        control={control}
+        breedOptions={breedOptions}
+        isTypeSelected={!!watchAnimalType}
+      />
+
+      <div className={styles.countAndSexDetailsWrapper}>
+        <NumberInput
+          name={FIELD_NAMES.COUNT}
+          control={control}
+          defaultValue={0}
+          label={t('common:COUNT')}
+          className={styles.countInput}
+          allowDecimal={false}
+          showStepper
+        />
+        <Controller
+          name={FIELD_NAMES.SEX_DETAILS}
+          control={control}
+          render={({ field }) => (
+            <SexDetails
+              initialDetails={sexDetailsOptions}
+              maxCount={watchAnimalCount}
+              onConfirm={(details) => field.onChange(details)}
+            />
+          )}
+        />
+      </div>
+      <Checkbox
+        label={t('ADD_ANIMAL.CREATE_INDIVIDUAL_PROFILES')}
+        tooltipContent={t('ADD_ANIMAL.CREATE_INDIVIDUAL_PROFILES_TOOLTIP')}
+        hookFormRegister={register(FIELD_NAMES.CREATE_INDIVIDUAL_PROFILES)}
+        onChange={(e) => onIndividualProfilesCheck?.((e.target as HTMLInputElement).checked)}
+      />
+      {shouldCreateIndividualProfiles ? (
+        // @ts-ignore
+        <Input
+          label={t('ADD_ANIMAL.GROUP_NAME')}
+          optional
+          placeholder={t('ADD_ANIMAL.GROUP_NAME_PLACEHOLDER')}
+          hookFormRegister={register(FIELD_NAMES.GROUP)}
+        />
+      ) : (
+        // @ts-ignore
+        <Input
+          label={t('ADD_ANIMAL.BATCH_NAME')}
+          optional
+          placeholder={t('ADD_ANIMAL.BATCH_NAME_PLACEHOLDER')}
+          hookFormRegister={register(FIELD_NAMES.BATCH)}
+        />
+      )}
+    </Card>
+  );
+}